vue文件找不到别名文件的声明类型,ts文件就没有问题?

作者站长头像
站长
· 阅读数 11

我通过pnpmworkspace搭建了一个工作环境,并且在项目中安装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文件才会有这样的问题,我现在不知道哪里有问题了?

有没有大佬帮帮我~

回复
1个回答
avatar
test
2024-07-05

可能是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 插件可以用这个配置来识别别名。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容