相对路径 import 易出错因层数难数且重构易漏改；需同步配置 TSConfig/jsconfig 的 baseUrl/paths、Webpack/Vite 的 resolve.alias，且 VSCode 需重启生效。
为什么 import 用相对路径会出问题？
当你在深层嵌套的文件里写 import utils from '../../../utils'，不仅容易数错 ../ 层数，重构目录时还极易漏改、报 Module not found 错。VSCode 本身不解析 Webpack 或 Vite 的别名配置，所以光配构建工具还不够——编辑器得“看懂”你写的 @/components/Button 指的是哪。
必须同时配齐三处：TSConfig + JSConfig + 构建工具
缺一不可。VSCode 的路径跳转和自动补全只认 tsconfig.json（或 jsconfig.json），而运行时加载靠的是 Webpack/Vite 的 resolve.alias。两者不同步，就会出现“能跳转但运行报错”或“能运行但 Ctrl+Click 失效”。
- 项目用 TypeScript？改
tsconfig.json的compilerOptions.baseUrl和paths - 纯 JavaScript？用
jsconfig.json，结构完全一样 - Webpack 项目？在
webpack.config.js里同步写resolve.alias - Vite 项目？在
vite.config.ts的resolve.alias里配
tsconfig.json 中 paths 怎么写才不踩坑？
常见错误是把 baseUrl 设成 "./src" 却忘了它必须是相对于 tsconfig.json 所在目录的绝对路径（即 "src"，不是 "./src"）。另外，paths 的 key 必须带通配符 *，否则只匹配完整字符串。
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"],
"@components/*": ["components/*"],
"@utils": ["utils/index"]
}
}
}
注意：@utils 这种无 * 的写法只匹配 import xxx from '@utils'；如果写了 import xxx from '@utils/some' 就必须用 @utils/*。
Webpack/Vite 别名要和 TSConfig 完全一致
Webpack 示例（webpack.config.js）：
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
};
Vite 示例（vite.config.ts）：
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'@components': resolve(__dirname, 'src/components'),
'@utils': resolve(__dirname, 'src/utils')
}
}
});
关键点：所有路径必须用 resolve() 或 path.resolve() 转成绝对路径；别名 key（如 @）两边不能有多余空格；改完记得重启 VSCode（不是刷新窗口，是彻底关掉再开）。
最常被忽略的是：改了 tsconfig.json 后没重启 VSCode，导致路径提示还是旧的——这时候 Ctrl+Click 依然跳不到目标文件。
