vue配置路径别名 @

修改 `vite.config.ts`

需要添加 @ 别名和 path 导入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'  // ← 添加这行

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')  // ← 添加这个配置
    }
  }
})

修改 `tsconfig.app.json`

在 compilerOptions 里添加：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    // ... 原有配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

两个路径配置的作用

vite.config.ts        → Vite 构建工具识别
tsconfig.app.json     → TypeScript 编译器识别

配置文件	作用	识别工具
vite.config.ts	告诉 Vite `@` 代表 `src/` 目录	Vite（开发服务器、打包）
tsconfig.app.json	告诉 TypeScript `@/` 代表 `src/`	TypeScript（类型检查、IDE 提示）

为什么两个都要配？

只配 Vite：运行没问题，但 IDE 会报红线，类型提示失效
只配 TSConfig：IDE 提示正常，但运行时会报找不到模块

简单理解：

运行时      → vite.config.ts 负责
开发时(IDE) → tsconfig.app.json 负责

现在重启 pnpm dev 应该可以正常运行了！

vue配置路径别名 @

修改 vite.config.ts

修改 tsconfig.app.json

两个路径配置的作用

评论区

vue配置路径别名 @

修改 `vite.config.ts`

修改 `tsconfig.app.json`