在Vite中配置路径别名需同时设置vite.config.ts的resolve.alias和tsconfig.json的compilerOptions.paths，并设baseUrl为"."，才能实现无报错导入、类型提示与跳转。
在 Vite 中配置路径别名（Alias）主要通过 vite.config.ts（或 .js）中的 resolve.alias 选项实现，配合 TypeScript 的 tsconfig.json 做类型识别支持，才能真正简化导入且不报错。
1. 在 vite.config.ts 中配置 alias
Vite 原生支持 resolve.alias，推荐使用 path.resolve() 构建绝对路径，避免相对路径出错：
import { defineConfig } from 'vite';
import { resolve } from 'path';
<p>export default defineConfig({
resolve: {
alias: {
'@': resolve(<strong>dirname, 'src'),
'@components': resolve(</strong>dirname, 'src/components'),
'@utils': resolve(<strong>dirname, 'src/utils'),
'@assets': resolve(</strong>dirname, 'src/assets')
}
}
});✅ 注意：
- 别名必须是字符串（不能是正则）；
- 键名末尾带 /（如 '@/'）可避免意外匹配到其他路径（比如 @a 被 @ 匹配）；
- 推荐统一用 '@/' 开头，语义清晰且不易冲突。
2. 配置 tsconfig.json 支持类型提示和跳转
仅配 Vite 的 alias 不够，TypeScript 编译器和编辑器（如 VS Code）不会识别这些路径，需同步配置 tsconfig.json 的 compilerOptions.paths：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@assets/*": ["src/assets/*"]
}
}
}✅ 关键点：
- 必须设置 "baseUrl": "."，否则 paths 不生效；
- paths 的值是相对于 baseUrl 的数组，支持多个备选路径；
- 修改后建议重启 TS 服务（VS Code 中按 Ctrl+Shift+P → “TypeScript: Restart TS server”）。
3. 使用示例与验证方式
配置完成后即可这样导入：
import Button from '@/components/Button.vue';
import { formatDate } from '@/utils/date';
import logo from '@/assets/logo.png';✅ 验证是否成功：
- ✅ VS Code 中 Ctrl + 点击 能跳转到对应文件；
- ✅ 运行 vite dev 或 vite build 不报模块解析错误；
- ✅ TS 类型检查正常，无红色波浪线。
4. 常见问题处理
-
别名不生效（TS 报错“Cannot find module”）：检查
tsconfig.json是否漏了baseUrl，或路径拼写大小写不一致（尤其 Windows/macOS 混合开发时）； -
Vite HMR 不识别 alias 变更：修改
vite.config.ts后需手动重启开发服务器； -
别名被其他插件覆盖：确保没有其他插件（如
@rollup/plugin-alias）重复配置 alias； -
想让别名也作用于 CSS/HTML 中的资源引用：Vite 默认支持（如
@/assets/logo.png在<img src>或background: url()中可用）。
