前端 - vue文件找不到别名文件的声明类型，ts文件就没有问题？

Question

我通过pnpm的workspace搭建了一个工作环境，并且在项目中安装typescript，但是在packages中的项目中无法识别别名文件的路径。报错如下：

Cannot find module 'store/modules/language' or its corresponding type declarations.Vetur(2307)

我在对应的packages项目中添加了tsconfig.json，配置如下：

{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "es2022",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": false,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "strictNullChecks": false,
    "noEmit": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "api/*": ["src/apis/*"],
      "api": ["src/apis/index"],
      "util/*": ["src/utils/*"],
      "pages/*": ["src/pages/*"],
      "hooks/*": ["src/hooks/*"],
      "router/*": ["src/routers/*"],
      "language/*": ["src/language/*"],
      "types/*": ["types/*"],
      "plugin/*": ["src/plugins/*"],
      "plugin": ["src/plugins/index"],
      "store/*": ["src/stores/*"],
      "store": ["src/stores/index"],
      "style/*": ["src/style/*"],
      "setting/*": ["src/settings/*"],
      "image/*": ["src/assets/images/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "mock/**/*.ts",
    "types/**/*.d.ts",
    "types/**/*.ts",
    "build/**/*.ts",
    "build/**/*.d.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

配置中已经包含了，对应的文件路径，在vite.config.ts也配置了相应的别名路径，项目时可以正常运行的。只是vscode会抛出这个错误，**.ts文件不会有问题，只有**.vue文件才会有这样的问题，我现在不知道哪里有问题了？

有没有大佬帮帮我～

Answer 1

可能是Vetur 插件可能无法解析你 tsconfig.json 文件里的路径别名。你可以在项目根目录下新建一个jsconfig.json的文件， 把tsconfig.json 里的配置复制到 jsconfig.json 文件里。

json

{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "es2022",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": false,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "strictNullChecks": false,
    "noEmit": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "api/*": ["src/apis/*"],
      "api": ["src/apis/index"],
      "util/*": ["src/utils/*"],
      "pages/*": ["src/pages/*"],
      "hooks/*": ["src/hooks/*"],
      "router/*": ["src/routers/*"],
      "language/*": ["src/language/*"],
      "types/*": ["types/*"],
      "plugin/*": ["src/plugins/*"],
      "plugin": ["src/plugins/index"],
      "store/*": ["src/stores/*"],
      "store": ["src/stores/index"],
      "style/*": ["src/style/*"],
      "setting/*": ["src/settings/*"],
      "image/*": ["src/assets/images/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

保存jsconfig.json文件，然后重启 VSCode，这样 Vetur 插件可以用这个配置来识别别名。