必须同时配置 webpack 的 resolve.alias 和 typescript 的 tsconfig.json 中 baseurl 与 paths，前者用于构建时路径替换，后者用于编辑器提示和编译解析；css/scss 中使用别名需加 ~ 前缀。
要在 TypeScript 项目中让 Webpack 正确识别路径别名（alias），必须同时配置 Webpack 和 TypeScript 两套系统——Webpack 负责构建时路径替换，TypeScript 负责编辑器提示和编译时路径解析，缺一不可。
Webpack 配置 resolve.alias
在 webpack.config.js（或 Vue CLI 的 vue.config.js）中设置绝对路径映射：
- 使用
path.resolve(__dirname, 'src')获取真实绝对路径，避免相对路径导致跨平台问题 - 别名键建议用
@、@utils、@comps等语义化前缀，不与 npm 包重名 - 值必须是完整绝对路径，不能写
./src或src - Vue CLI 项目需通过
chainWebpack修改 alias，且改完要重启 dev server
示例（webpack.config.js）：
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@comps': path.resolve(__dirname, 'src/components'),
'@api': path.resolve(__dirname, 'src/api')
},
extensions: ['.ts', '.tsx', '.js', '.json']
}
};
tsconfig.json 配置 baseUrl 和 paths
TypeScript 编译器不会读取 Webpack 的 alias，必须单独配置 tsconfig.json：
-
baseUrl设为"."（项目根目录），作为所有别名路径的基准点 -
paths中的 key 是别名模式（如@/*），value 是相对于baseUrl的数组路径 - 注意：如果
baseUrl设为"src"，那paths就要写成{"*": ["*"]}，但更推荐统一设为"."
示例（tsconfig.json）：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@comps/*": ["src/components/*"],
"@api/*": ["src/api/*"]
}
}
}
CSS/SCSS 中引用别名资源要加 ~
在样式文件里使用 alias 引入图片或字体时，Webpack 默认不识别裸别名，必须加 ~ 前缀：
- ✅ 正确：
background: url('~@/assets/logo.png'); - ❌ 错误：
background: url('@/assets/logo.png');（会被当成普通字符串） - 这是 Webpack 的 css-loader 规则，与 JS/TS 无关，仅作用于
.css、.scss等样式文件
其他配套项不能漏
确保开发体验完整，还需检查以下几处：
- VS Code 或其他编辑器需重启，才能识别新配置的别名跳转和自动补全
- 如果用了
eslint或tslint，可能需要配置import/resolver插件，否则会报“无法解析模块”警告 - 运行时 Node 环境（如 Jest 测试）若用别名，需额外引入
tsconfig-paths/register - 别名结尾带
$（如react$）可精确匹配完整模块名，避免意外命中子路径
