webpack 中通过 resolve.alias 配置别名，核心目的是用简短、固定的前缀替代冗长的相对路径，提升导入可读性与可维护性；需在 webpack.config.js 或 vue.config.js 中配置绝对路径别名，css/scss 中引用须加 ~ 前缀，ts 项目还需同步配置 tsconfig.json 的 baseurl 和 paths。
Webpack 中通过 resolve.alias 配置别名，核心目的是用简短、固定的前缀替代冗长的相对路径（比如 ../../../../components/Button.vue），让导入更直观、可维护，也避免因目录结构调整导致大量路径失效。
基础配置方式
在 webpack.config.js 的 resolve 选项中定义别名映射：
- 使用
path.resolve(__dirname, 'src')获取绝对路径，确保跨平台兼容 - 别名键名建议用
@、_com、@utils等语义化前缀，避免与 npm 包名冲突 - 值必须是完整绝对路径，不能是相对路径或变量未解析形式
示例：
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'_com': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
};
之后即可这样引入：
import Button from '_com/Button.vue';
import { debounce } from '@utils/debounce';
Vue CLI 3+ 项目中的写法
Vue CLI 不暴露原始 webpack 配置文件，需在 vue.config.js 中通过 chainWebpack 修改：
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_com', resolve('src/components'))
.set('_img', resolve('src/assets/images'));
}
};
⚠️ 注意：修改后需重启开发服务，否则不生效。
样式文件（CSS/SCSS/LESS）中引用别名
在 <style></style> 标签或独立样式文件中使用 @import 时，必须加 ~ 前缀，否则 css-loader 会误将 @ 解析为 CSS 规则（如 @media）：
- ✅ 正确：
@import '~@/assets/styles/mixin.scss'; - ❌ 错误：
@import '@/assets/styles/mixin.scss';（报路径找不到） - ✅ 同样适用于
url()：background: url('~_img/logo.png');
TypeScript 项目需同步配置 tsconfig.json
仅配 webpack 别名，TS 编译器仍会报“找不到模块”，因为 tsc 不读取 webpack 配置。必须同步设置 baseUrl 和 paths：
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"_com/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}
这样 TS 类型检查、IDE 跳转、自动补全才能正常工作。两者缺一不可。
不复杂但容易忽略
