Vue3+Vite+TypeScript项目配置@路径别名未按预期生效问题咨询

API 探路者

2026-9-30

解决方案

检查vite配置文件头部是否导入了path模块的resolve方法，这是绝大多数配置失效的原因：

// ES模块规范项目（package.json中type设为module时）添加以下导入
import { resolve } from 'path'
// CommonJS规范项目使用以下写法
const { resolve } = require('path')

若你的项目是TypeScript项目，需要同步在tsconfig.json中配置路径映射，否则TS语法校验会无法识别@别名：
```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```
若你的项目使用ES模块规范，vite配置中无法识别__dirname变量，需要调整别名的路径写法：
```
// 原写法替换为如下内容
alias: {
  '@': resolve(new URL('./src', import.meta.url).pathname)
}
```

可以将数组形式的alias配置简化为对象写法，降低配置出错概率，修改后的完整vite配置参考如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        extensions: ['.ts', '.js', '.vue'],
        alias: {
          '@': resolve(__dirname, 'src')
        },
    },
    plugins: [
        vue(),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ]
})