import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// *********************************** 路径配置新增 start import { resolve } from 'path' const pathResolve = (dir: string): any => { return resolve(__dirname, ".", dir)} const alias: Record<string, string> = { '@': pathResolve("src")}// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], resolve: { // ****************** 路径配置新增 alias // ****************** 路径配置新增 } // ****************** 路径配置新增})AI写代码 3. 其次在
时间: 2025-04-04 17:04:04 浏览: 48
### Vite 中配置路径别名
在 Vite 的 `vite.config.js` 文件中,可以通过 `resolve.alias` 属性来定义路径别名。这使得开发者能够更方便地导入模块而无需依赖冗长的相对路径。
以下是基于 `defineConfig` 和 `@vitejs/plugin-vue` 插件的一个完整示例:
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue() // Vue 插件支持
],
resolve: {
alias: {
'@': '/src', // 将 @ 别名指向 src 目录
'@components': '/src/components', // 自定义其他目录别名
'@utils': '/src/utils' // 实用工具函数目录别名
}
}
});
```
上述代码通过 `resolve.alias` 定义了多个路径别名[^1]。其中,`@` 被映射到项目的 `src` 目录下,这样可以在任何地方使用 `@/components/Button.vue` 来代替复杂的相对路径写法。
如果需要进一步扩展功能或者调整构建行为,则可以根据实际需求修改此部分逻辑[^2]。
对于插件安装方面,在某些情况下可能还需要额外引入特定插件完成环境初始化工作。例如当涉及到复杂场景如三维地图渲染引擎集成时可考虑如下操作流程:利用图形界面工具快速添加所需依赖项并激活对应的功能集[^3]。
#### 注意事项
- 确保所使用的 IDE 或编辑器已正确解析这些新的路径别名,通常需同步更新 tsconfig.json (TypeScript 项目)中的 compilerOptions.paths 字段。
阅读全文
相关推荐


















