Turborepo+Vue/Nuxt项目ESLint路径解析错误求助

安全阿岳

2026-6-19

解决Turborepo Vue项目中ESLint无法解析@别名路径的问题

问题原因

出现import/no-unresolved错误，是因为ESLint默认无法识别Vite配置中@对应的路径别名——Vite本身能正确解析该别名，但ESLint需要额外配置才能同步识别。而packages目录的导入正常，是因为Turborepo的默认配置已经让ESLint将packages下的包视为可解析模块。

解决步骤

1. 配置TypeScript路径映射（若未配置）

在apps/web目录下创建或修改tsconfig.json，添加路径映射规则，让TypeScript识别@指向src目录：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "*.vue"]
}

2. 配置ESLint解析器以识别别名

推荐使用eslint-import-resolver-typescript让ESLint读取TypeScript的路径配置，步骤如下：

安装依赖

在apps/web目录下执行：

npm install eslint-import-resolver-typescript --save-dev

修改ESLint配置

编辑apps/web/.eslintrc.js，添加settings配置，指定TypeScript解析器及对应的tsconfig路径：

module.exports = {
  // 保留原有配置...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json']
  },
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json'
      }
    }
  }
};

备选方案：直接在ESLint中配置别名

如果不想依赖TypeScript配置，也可以用eslint-import-resolver-alias直接配置：

安装依赖

npm install eslint-import-resolver-alias --save-dev

修改ESLint配置

module.exports = {
  // 保留原有配置...
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src']],
        extensions: ['.vue', '.ts', '.js', '.json']
      }
    }
  }
};