核心区别
简单来说，两者的核心差异在于模块路径的书写规则和解析逻辑：
- 相对模块：路径以
./（当前目录）、../（上级目录）开头，是 “相对于当前文件位置” 的导入方式，主要用于项目内部的文件引用。 - 绝对模块：路径不以
.//../开头（比如直接写utils、@/components/Button），是 “基于配置的根目录” 的导入方式，需要配合 TS 配置（tsconfig.json）指定解析规则，常用于简化深层嵌套的路径，或引用第三方库 / 全局模块。
详细示例与解析
先搭建一个典型的 TS 项目结构，方便后续举例：
my-project/ ├── src/ │ ├── components/ │ │ └── Button.ts // 组件文件 │ ├── utils/ │ │ └── math.ts // 工具函数 │ └── pages/ │ └── Home.ts // 业务页面 └── tsconfig.json // TS 配置文件
1. 相对模块（Relative Modules）
特点：路径从当前文件的位置出发，通过 .//../ 定位目标文件，无需额外配置，是最基础的导入方式。
示例 1：同级 / 下级目录导入
在 src/pages/Home.ts 中导入同级 / 下级文件（这里假设 Home 同级有 common.ts）：
// src/pages/Home.ts
// 导入同级的 common.ts（./ 表示当前目录）
import { formatDate } from './common';
// 导入上级目录的 utils/math.ts（../ 表示上级目录）
import { add } from '../utils/math';
// 导入上级目录的 components/Button.ts（多级上级）
import Button from '../components/Button';
示例 2：深层嵌套的问题
如果项目层级很深，相对路径会变得冗长且易出错，比如：
// 假设在 src/a/b/c/d.ts 中导入 src/utils/math.ts
import { add } from '../../../../utils/math'; // 多层 ../ 可读性差
2. 绝对模块（Absolute Modules）
特点：路径不以 .//../ 开头，需要在 tsconfig.json 中配置 baseUrl 或 paths 来指定模块的根目录，解析时会从配置的根目录出发查找文件，简化路径书写。
配置前提（修改 tsconfig.json）
先在 tsconfig.json 中配置核心参数（关键）：
{
"compilerOptions": {
"baseUrl": "./src", // 设定模块解析的根目录为 src 文件夹
"paths": {
// 可选：配置路径别名（更灵活的绝对路径）
"@/*": ["*"] // 用 @ 代替 src 根目录，* 匹配后续路径
},
"module": "ESNext", // 模块系统（ES6 模块）
"moduleResolution": "NodeNext" // 模块解析策略（推荐）
},
"include": ["src/**/*"]
}
示例 1：基于 baseUrl 的绝对导入
配置 baseUrl: "./src" 后，所有绝对路径都会从 src 目录开始解析：
// src/pages/Home.ts
// 绝对路径：直接从 src 根目录找 utils/math.ts
import { add } from 'utils/math';
// 绝对路径：从 src 根目录找 components/Button.ts
import Button from 'components/Button';
示例 2：基于 paths 别名的绝对导入（更常用）
配置 paths: { "@/*": ["*"] } 后，可用 @ 代替 src 根目录，是业界主流写法：
// src/pages/Home.ts
// 别名绝对路径：@ 等价于 src 目录
import { add } from '@/utils/math';
import Button from '@/components/Button';
// 即使深层嵌套文件，路径也简洁
// src/a/b/c/d.ts 中导入
import { add } from '@/utils/math'; // 无需多层 ../
示例 3：第三方库的绝对导入
我们日常导入 react、lodash 等第三方库时，本质也是绝对模块导入（TS/Node 会自动从 node_modules 解析）：
// 绝对模块：直接写库名，无需路径前缀 import React from 'react'; import _ from 'lodash';
关键对比表
| 特性 | 相对模块 | 绝对模块 |
|---|---|---|
| 路径开头 | 以 .// ../ 开头 | 不以 .// ../ 开头 |
| 解析依据 | 相对于当前文件位置 | 基于 tsconfig.json 的 baseUrl/paths |
| 适用场景 | 简单项目、少量层级引用 | 复杂项目、深层嵌套路径、统一路径规范 |
| 可读性 | 层级深时差（多 ../） | 始终简洁 |
| 配置要求 | 无需配置 | 需配置 tsconfig.json |
总结
- 相对模块：路径以
.//../开头，基于当前文件位置解析，无配置成本，适合简单项目或少量层级的内部引用； - 绝对模块：路径无
.//../前缀，需通过tsconfig.json的baseUrl/paths配置根目录 / 别名，解析更统一，适合复杂项目简化深层路径； - 第三方库的导入（如
import React from 'react'）属于天然的绝对模块，TS 会自动从node_modules解析。