TypeScript+Vite+Vue项目路径别名配置失败求助

针对你遇到的长路径简化别名配置后出现类型错误的问题，核心原因是TypeScript配置未正确作用到应用代码，加上可能的ESLint未同步识别别名，下面是分步解决方法：

1. 修正TypeScript路径配置位置 #

Vue+Vite初始化的项目中，根目录tsconfig.json是聚合配置，实际应用代码的TS规则由tsconfig.app.json管理。你需要把别名路径配置移到该文件中：

修改tsconfig.app.json：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@forth/*": ["./src/first/second/third/forth/*"]
    }
  }
}

根目录tsconfig.json可保留原有结构，但无需重复配置paths，因为应用代码不会读取这里的路径规则。

2. 优化Vite别名配置 #

简化Vite的别名写法，避免路径拼接错误：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@forth': fileURLToPath(new URL('./src/first/second/third/forth', import.meta.url))
    }
  }
})

3. 同步ESLint别名识别（若有ESLint报错） #

如果配置后ESLint提示模块找不到，需安装依赖并配置ESLint解析器：

1. 安装依赖：

pnpm add -D eslint-import-resolver-typescript

2. 修改.eslintrc.cjs：

module.exports = {
  // 其他原有配置...
  settings: {
    'import/resolver': {
      typescript: {
        project: ['./tsconfig.app.json', './tsconfig.node.json']
      }
    }
  }
}

最后必做步骤 #

• 重启VSCode，或按下Ctrl+Shift+P执行TypeScript: Reload Project，让TS重新加载配置
• 检查文件夹结构是否与配置路径完全匹配，比如src/first/second/third/forth必须存在
• 确保别名和目标路径的斜杠规则一致（比如@components/*对应./src/components/*，末尾都带*）

内容的提问来源于stack exchange，提问作者Akhademik