别名路径配置

Vite 支持配置路径别名，简化复杂的相对路径导入，提高代码可读性。

基础配置

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

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

使用别名导入

// 原路径
import MyComponent from '../../../components/MyComponent.vue'

// 使用别名后
import MyComponent from '@/components/MyComponent.vue'

多别名配置

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@c': path.resolve(__dirname, './src/components'),
      '@a': path.resolve(__dirname, './src/assets')
    }
  }
})

TypeScript 类型支持

tsconfig.json 中同步配置：

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

注意：别名配置需同时在 vite.config.js 和 tsconfig.json 中设置，否则 TypeScript 类型检查会报错。

条件别名

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, './src')
      },
      {
        find: /^@lib\/(.+)/,
        replacement: path.resolve(__dirname, './lib/$1')
      }
    ]
  }
})

要点总结

• resolve.alias 配置路径别名
• @ 是常用别名映射 src 目录
• TypeScript 需同步配置 paths
• 别名简化导入路径，提升可读性