Vite 配置路径别名

在 Vite 项目中配置路径别名可以让你使用更简洁的路径来引用模块，而不需要使用冗长的相对路径。

配置方法

1. 修改 vite.config.js/vite.config.ts

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // 可以添加更多别名
      '@components': path.resolve(__dirname, './src/components'),
      '@assets': path.resolve(__dirname, './src/assets')
    }
  }
})

2. TypeScript 项目额外配置

如果你使用 TypeScript，还需要在 tsconfig.json中添加对应的路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

3. 使用示例

配置完成后，你可以这样引用模块：

import MyComponent from '@/components/MyComponent.vue'
import utils from '@/utils'
import logo from '@assets/images/logo.png'

注意事项

​​确保安装了 path模块​​：如果遇到 path未定义的错误，需要安装 Node.js 的类型定义：

npm install --save-dev @types/node
​​Vite 2.x 和 3.x 的差异​​：Vite 2.x 需要手动安装 @rollup/plugin-alias，而 Vite 3.x 已内置此功能。

​​编辑器支持​​：某些编辑器可能需要重启才能正确识别新的路径别名。

​​测试环境​​：如果你使用 Jest 或其他测试工具，可能需要在测试配置中单独设置模块路径解析。

动态导入

路径别名也支持动态导入：

const module = await import('@/modules/myModule')

通过配置路径别名，可以使你的代码更简洁、更易于维护。