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

更新时间：2024年08月16日 10:18:53 作者：要来一杯多娜茶吗？

这篇文章主要介绍了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"
  ],

重启项目即可~

总结

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

您可能感兴趣的文章:

vue3+ts+EsLint+Prettier规范代码的方法实现
本文主要介绍在Vue3中使用TypeScript做开发时，如何安装与配置EsLint和Prettier，以提高编码规范。感兴趣的可以了解一下
2021-10-10
vue实现购物车结算功能
这篇文章主要为大家详细介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
Vue中jsx不完全应用指南小结
这篇文章主要介绍了Vue中jsx不完全应用指南小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue.js出现Vue.js not detected错误的解决方案
这篇文章主要介绍了vue.js出现Vue.js not detected错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue.js实现只弹一次弹框
本篇文章通过代码实例给大家详细讲述了一个vue的实例，实现只弹一次弹框功能，一起学习分享下。
2018-01-01
vue项目中应用ueditor自定义上传按钮功能
这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-04-04
vue+canvas实现拼图小游戏
这篇文章主要为大家详细介绍了vue+canvas实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
脚手架vue-cli工程webpack的作用和特点
webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
2018-09-09
使用Vue3+PDF.js实现PDF预览功能
项目中有一个需要预览下载pdf的需求,网上找了很久,决定使用 pdf.js 完成,下面这篇文章主要给大家介绍了关于使用Vue3+PDF.js实现PDF预览功能的相关资料,需要的朋友可以参考下
2022-12-12
vue中数组加Key方式
这篇文章主要介绍了vue中数组加Key方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03