MONOREPO 下 VETUR 提示找不到声明文件

问题描述

最近搞了一个 monorepo 项目 ，其中有某个 package 为 前端Vue项目。

项目大概目录结构如下:

在书写代码过程中遇到如下问题

Cannot find module '@/hooks' or its corresponding type declarations.Vetur(2307)

检查tsconfig.json配置是有 paths的

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "lib": ["dom", "esnext"],
    "types": ["vite/client", "jest"],
    "typeRoots": ["./node_modules/@types/", "./types"],
    "paths": {
      "@/*": ["./src/*"],
    },
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts",
  ],
  "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
}
​

检查 vite.config.ts 也是有配 alias的

{
   resolve: {
      alias: [
        {
          find: '@',
          replacement: path.resolve(__dirname, 'src'),
        },
      ],
    },
}

在正常 ts / js 文件下引用也是没有问题的。

问题原因

对于Vetur插件而言，如果是 monorepo项目，我们需要手动配置插件的配置文件。官网讨论及pr 如下

github.com/vuejs/vetur…

这里我们不过多描述，直接给出最终解决方案

在项目根目录下新建vetur.config.js

module.exports = {
  projects: [
    {
      root: './packages/app-web',
      package: './package.json',
      tsconfig: './tsconfig.json',
    },
  ],
}

其中需要注意的是 projects 支持一个数组配置，我这里因为只有一个 Vue 项目，所以只配了一个。root字段代表项目根路径