JavaScript 中 Vite 怎么配置别名路径实现快速导入-js教程-PHP中文网

在 vite 中配置别名路径需在 vite.config.ts 的 resolve.alias 中设置绝对路径映射（如 {'@': path.resolve(__dirname, 'src')}），并同步在 tsconfig.json 的 compileroptions.paths 和 baseurl 中配置以支持 typescript 类型提示，最后通过导入验证、构建检查和 sources 面板确认生效。

javascript 中 vite 怎么配置别名路径实现快速导入

在 Vite 中配置别名路径，核心是通过 vite.config.ts（或 .js）里的 resolve.alias 选项，把常用目录映射成简短前缀，比如用 @/components 代替冗长的相对路径 ../../../components。

配置 resolve.alias 映射路径

在 vite.config.ts 的 defineConfig 中添加 resolve.alias，使用绝对路径（推荐基于 path.resolve）指向项目目录：

用 __dirname 或 process.cwd() 确保路径正确，避免跨平台问题
别名键名结尾加 /（如 '@/'），可匹配子路径；不加则只精确匹配该字符串
常见写法：{ '@': path.resolve(__dirname, 'src') }，这样 @/utils/request 就等价于 src/utils/request

同时适配 TypeScript 类型提示

仅配 Vite 别名，TS 编译器和编辑器（如 VS Code）可能无法识别，需同步配置 tsconfig.json 的 compilerOptions.paths：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

在 tsconfig.json 的 compilerOptions 下添加："paths": { "@/*": ["src/*"] }
确保 baseUrl 设为 "."，否则 paths 不生效
改完后重启 TS 服务（VS Code 中可按 Ctrl+Shift+P → “Restart TS server”）

支持多层级别名与动态路径

除了基础 @，还可按需定义语义化别名，提升可读性：

例如：{ '@api': path.resolve(__dirname, 'src/api'), '@assets': path.resolve(__dirname, 'src/assets') }
如果项目有多个包（monorepo），可用 path.resolve(__dirname, '../packages/utils') 指向外部目录
注意：别名值必须是绝对路径，不能用 ./ 或 ../