最新版vite+ts+vue使用别名alias@引入报错解决方案

不论怎么按照网上修改，ai修复都无效，VScode和WebStorm都会提示 找不到模块“@/utils/usePermission”或其相应的类型声明。ts-plugin(2307)

项目使用版本

"vue": "^3.5.13",
"typescript": "~5.7.2",
"vite": "^6.3.1",

文件结构

├── src
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

最新解决方案

在tsconfig.app.json中添加 "baseUrl": ".","paths": { "@/*": ["src/*"] },不要听信AI给你的修复

 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    //其他配置保持原有
}

vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': "/src"
    }
  }
})