vite+vue3+ts项目中提示无法找到模块的问题及解决

vite+vue3+ts项目中提示无法找到模块

在开发过程中碰到了导入模块时提示无法找到模块这个问题，分享一下我的解决思路

首先产生这个错误是：无法找到模块XXX，并且提示'XXX' is declared but its value is never read

产生这个问题的原因是我们使用了ts语法，他只能识别.ts文件，并不能识别.vue文件，所以在引入组件的时候报错了

注意：

这个错误并不影响代码的正常运行，只是在编写代码时，import xxx from 'xxx'会一直飘红，很影响观感

这里提供一种解决方案

1.在项目的根目录下创建一个xxx.d.ts文件，文件名自定义即可，后缀必须是.d.ts

2.在刚刚创建的文件中输入一下代码

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
  }

保存代码，并且重启项目，这样令人不悦的红色就会消失啦

vue3+ts报错:Cannot find module‘@/views/xxx.vue‘ or its corresponding type declarations

在Vue的TypeScript项目中，使用const test = () => import('@/views/login')语法动态导入模块时，可能会出现类型声明文件找不到的错误。

这是由于TypeScript无法正确解析动态导入的路径而导致的。

尽管你在项目中没有遇到问题，但TypeScript的类型检查器仍然会发出警告或错误，因为它无法找到相应的类型声明文件。

解决这个问题

你可以在Vue项目的根目录下创建一个env.d.ts（或者其他任何你喜欢的名称）的文件，并在其中添加以下内容：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

在tsconfig.json 里引入env.d.ts

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "./global.d.ts",
    "./env.d.ts"
  ],

重启项目即可~

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。