在 vite 项目中配置别名，需要在 vite.config.js 文件中设置 resolve.alias 选项。这通常通过引入 node.js 的 path 模块并使用 path.resolve() 来生成绝对路径，从而将短标识符映射到具体的文件位置。
如何配置基本的路径别名
要配置基本的路径别名，你需要在配置文件中使用 @ 符号指向 src 目录。这是最常见的用法，允许你在代码中通过 import { something } from '@/components/Button' 的方式引用文件，而不是使用相对路径如 ../../components/Button。
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
上述代码定义了 @ 别名。当你运行项目时，Vite 会将所有以 @/ 开头的导入解析为 ./src/ 下的对应文件。确保你的 src 目录存在，否则构建会失败。
立即学习“Java免费学习笔记（深入）”；
如何配置多个自定义别名
除了指向 src，你可能还需要为特定的资源或工具库设置别名，例如将 ~assets 指向静态资源文件夹，或将 ~utils 指向工具函数目录。这样可以进一步简化导入语句的结构。
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'~assets': path.resolve(__dirname, './src/assets'),
'~utils': path.resolve(__dirname, './src/utils'),
},
},
});
配置完成后，你可以在代码中使用 import helper from '~utils/helper'。这种多别名配置有助于保持项目结构的清晰，特别是当项目规模较大时。注意不要定义相互冲突的别名，后定义的可能会覆盖先前的（取决于具体实现，但通常建议唯一）。
配置别名后 TypeScript 找不到模块怎么办
仅配置 Vite 的别名不足以让 TypeScript 识别这些路径。你必须在 tsconfig.json 中的 paths 字段中添加相同的映射，并指定对应的 baseUrl。这样 IDE 和 TypeScript 编译器才能正确解析类型和路径。
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"~assets/*": ["src/assets/*"],
"~utils/*": ["src/utils/*"]
}
}
}
同步配置 Vite 和 TypeScript 是解决“找不到模块”错误的标准做法。如果只配置了其中一方，IDE 可能会报错，或者构建过程出现不一致。确保 paths 中的通配符 * 与 Vite 中的行为一致。
