Vue 3 + Vite + TypeScript 项目配置 @ 路径别名

1. 配置 Vite 别名

修改根目录下的 vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' 

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') 
    }
  }
})

2. 安装 Node 类型声明（防止找不到 path 报错）

npm install --save-dev @types/node

3. 配置 tsconfig.app.json

编辑 tsconfig.app.json，添加 baseUrl 和 paths：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client", "node"],

    /* 其他你的原有配置 */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

🔁 配置后别忘了

• 重启开发服务器（vite）
• 重启 VS Code / WebStorm，让路径别名类型提示生效
• 如果 ESLint 报错，可能还需要额外配置别名支持