vue3 报错解决：找不到模块或其相应的类型声明。

原创 已于 2024-08-22 12:57:48 修改 · 3.7k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #typescript

于 2024-08-21 16:32:10 首次发布

vue3 引入组件报错Cannot find module './components/Person' or its corresponding type declarations.
在这里插入图片描述
检查了路径正确，文件存在，Perosn.vue文件内部没有任何报错。
所以为啥找不到文件啊？

这个报错让我很迷惑。百度了一堆解决方案：

  1. 卸载或禁用 Vetur 插件。
    这个插件是vue 2.x 的插件。
    卸载这个插件后，去掉了vs code弹出的提示：In the vue 3 project, The Vue Language Features (Volar) is new recommended ...
    如果在vs code的配置文件中有Vetur的相关配置，也要注释掉。

vue3在引入组件时报has no default export，意思就是没有进行默认导出。
在vs code 的配置文件中加一个配置："vetur.validation.script": false
这个配置项是关于vs code的Vetur 插件的设置，用于控制是否启用Vue文件中JavaScript代码的验证。
当设置 "vetur.validation.script": false 时，关闭Vetur插件对Vue文件中的JavaScript/TypeScript代码进行语法检查。

  1. 看到有同学提供如下图所示的解决方案，我照着做了，没什么用。我就把这个插件启用了。

最低0.47元/天 解锁文章
vue2/3 - 报错Error：Cannot find module ‘chokidar‘ | Require stack（vue找不到模块“chokidar”，项目报错完美解决方案）
高级前端工程师
04-16 3208
vue2，vue3，vue chokidar，chokidar模块是什么，如何解决vue缺失chokidar模块，安装chokidar报错，vue启动报错，Error：Cannot find module 'chokidar'，找不到模块“chokidar”，npm run dev，npm run serve，运行项目出现错误，如何解决vue报错，vue报错怎么办，终端报错无法启动，详细解决教程，node_modules，重新安装依赖也不行，还是不行怎么办，vue 报错，在vue2、vue3开发中，出现报错
uniapp报错[plugin:vite:import-analysis] Cannot find module ‘@dcloudio/uni-components/style/audio.css
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-23 978
uniapp #音频播放 #音频通话 #webrtc #h5开发 #renderjs今天在搞一个 WebRTC 的音频通话功能，想着用最简单的方式试试，直接用<audio>一脸懵逼。
vue3 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
hfwangyl的博客
10-12 1万+
4、点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。2、输入 built，然后选择“Extensions：Show Built-in Extensions”。5、重新加载工作空间。3、在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
Vue3+TypeScript使用动态导入import()导入.vue文件报错：找不到模块“xxx.vue”或其相应的类型声明。ts(2307)
BillKu的博客
09-16 483
TypeScript 在某些情况下对较深嵌套路径的模块类型推断可能不如对简单路径的推断准确，尤其是在没有明确的模块声明时。文件都应该被视为 Vue 组件模块，这样无论它们在目录结构中的哪个位置，TypeScript 都能正确识别它们的类型。这个问题涉及 TypeScript 对模块路径解析和类型声明的处理方式。然而，TypeScript 在解析模块时会根据路径进行不同的处理。主要原因在于 TypeScript 对模块路径的处理方式和类型声明的查找机制。模块声明，我们告诉 TypeScript 所有。
使用 yarn，ts 提示 找不到模块“xxx”或其相应的类型声明
左不言的博客
02-13 1199
找不到模块“xxx”或其相应的类型声明 Module "xxx" or its corresponding type declaration could not be found .pnp.cjs .pnp.loader.mjs
Vue3开发选择vscode时需要注意的方面
繁若华尘的博客
03-01 892
可以显著提升 Vue3 在 VS Code 中的开发体验，减少环境问题带来的干扰。
Vue3解决“找不到模块“@/components/xxx.vue”或其相应的类型声明”
qq_43657722的博客
05-22 1万+
在使用 Vue 3 开发项目时，遇到“找不到模块 ‘@/components/xxx.vue’ 或其相应的类型声明”的错误是一个常见问题。这通常与 TypeScript 和模块解析相关的配置不当有关。本文将详细介绍如何解决此问题，确保你的项目能够正确识别和导入 Vue 组件。
Vue3+TS 报错：找不到模块或其相应的类型声明
banzhuanren1的博客
10-24 2012
在src 目录下找到vite-env.d.ts文件 将下方代码粘贴即可解决。
vue3+vite：报错 trip): [ReferenceError] module is not defined in ES module scope（vue3项目报错模块在ES模块范围内未定义）
最新发布
高级前端工程师
10-22 4291
trip): [ReferenceError] module is not defined in ES module scope，vite报错，vue3报错，控制台提示错误，ReferenceError: module is not defined in ES module scope，CommonJS 模块，ES 模块系统，Vite 默认使用原生 ES 模块， postcss配置文件暂不支持 ESM 语法，如何解决这个问题，node esm模块没有运行报错，解决报错。
vue2/3 - 报错Error：Cannot find module ‘body-parser‘ | Require stack（vue找不到模块“body-parser”，项目报错完美解决方案）
高级前端工程师
04-16 3490
vue2，vue3，vue body-parser，body-parser模块是什么，如何解决vue缺失body-parser模块，安装body-parser报错，vue启动报错，Error：Cannot find module 'body-parser'，找不到模块“body-parser”，npm run dev，npm run serve，运行项目出现错误，如何解决vue报错，vue报错怎么办，终端报错无法启动，详细解决教程，node_modules，重新安装依赖也不行，还是不行怎么办，vue 报错，
Vue3 - Vite解决报错ReferenceError: module is not defined in ES module scope（vue3+vite项目编译运行或打包报错，详细排查解决）
🏆 前端领域优质创作者
09-19 4409
Vite报错ReferenceError: module is not defined in ES module scope，vue3报错ReferenceError: module is not defined in ES module scope，vue3项目报错module is not defined in ES module scope，vite如何解决报错，vue3+vite运行报错，如何解决这个问题，项目启动报错，vue3项目报错，postcss.config.js，yarn dev启动报错R
找不到模块“xxx.vue”或其相应的类型声明问题
weixin_49428989的博客
08-29 7003
最近在使用动态组件时，遇到切换时找不到响应组件的问题。
vue3+ts 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module）
热门推荐
weixin_44166849的博客
03-29 3万+
3.检查 TypeScript 配置：如果项目中有 tsconfig.json 或 jsconfig.json 文件，确保该文件包含了正确的路径别名或根路径。4.检查 Vue 配置：如果使用了如 webpack 或 Vite 这样的构建工具，确保相关的配置能够正确处理 .vue 文件。1、在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。1.检查文件路径：确保 文件的路径是正确的，并且确实存在于 components 目录下。
vue3报错：Cannot find module ‘@/xx‘ or its corresponding type declarations. Vetur(2307)
weixin_52268321的博客
07-28 2115
报错解决：Cannot find module '@xxx.vue' or its corresponding type declarations. Vetur(2307) 和 Module '"xxxx.vue"' has no default export.Vetur(1192)
vue3+ts中 .vue文件引入报错：找不到模块或其相应的类型声明
小白的笔记
03-21 967
vue3+ts中 .vue文件引入报错：找不到模块或其相应的类型声明
报错：找不到模块“./App.vue”或其相应的类型声明。ts(2307)
小卡拉米的博客
01-23 7396
报错：找不到模块“./App.vue”或其相应的类型声明。ts(2307)
找不到模块“../views/layout/index.vue”或其相应的类型声明。ts(2307)
qq_40913592的博客
06-30 2655
在vue项目开发，运行不报错，在我们配置项目路由的时候使用路由懒加载引入该组件的时候出现报错， 在编辑器里报错，十分难受。这个错误很明显是ts抛出的，产生的原因是vue中没有export变量，导致ts无法识别导出的内容，即ts类型需要明确 ，1.首先在src目录下创建一个vite-env.d.ts的文件。2.在文件中引入这些代码。
VUE3中出现Cannot find module ‘@/api/xxx.js‘ or its corresponding type declarations.
Thur_wake的博客
05-11 1869
@ts-ignore` 是 TypeScript 中的一个注释指令，用于告诉 TypeScript 编译器忽略下一行代码中的类型检查。在上面的例子中，如果没有 `@ts-ignore`，TypeScript 编译器会提示一个错误，因为 `myVariable` 的类型没有被定义。例如，当引入一个第三方库，而这个库没有提供类型定义文件（`.d.ts`），或者在开发过程中想要快速测试一些代码而不想处理类型错误时，可以使用 `@ts-ignore`。
找不到模块 “path“ 或其相对应的类型声明
yupyuping的博客
03-17 1万+
在config.js 或者 config.ts 里面直接添加 importpathfrom"path"; 有可能会报这个错误提示： error：找不到模块 'path' 或其相对应的类型声明 解决方法： 根据你前面的配置进行修改： import path from "path"; //找不到模块 'path' 或其相对应的类型声明 export default defineConfig({ .............. resolve:{ alias:{ ...
vue报错找不到模块“.vue”或其相应的类型声明
07-08
<think>我们正在处理一个Vue项目中的问题，具体是关于在导入.vue文件时遇到的模块找不到或类型声明错误。 根据提供的引用信息，这个问题通常发生在Vue3 + Vite + TypeScript（或JavaScript）项目中，尤其是在main.ts/main.js中导入App.vue时。 解决方案主要围绕声明.vue文件的模块类型，以便TypeScript（或工具）能够识别。 参考引用： - 引用[1]提到在vue3+js的情况下，需要创建或修改env.d.ts文件（或类似声明文件）来声明*.vue模块。 - 引用[2]和[3]提供了具体的代码声明：使用`declare module "*.vue"`来定义.vue文件的类型。 - 引用[4]也给出了类似的代码，并强调在TypeScript项目中需要这样做。 因此，解决方案的核心是创建一个类型声明文件（如env.d.ts）并在其中声明.vue模块。 下面我们分步骤说明解决方案： ### 解决方案步骤 #### 步骤1: 确认或创建类型声明文件 在项目根目录（或src目录）下，确认是否存在`env.d.ts`（或`vite-env.d.ts`）文件。如果没有，则创建一个。 #### 步骤2: 声明.vue模块 在声明文件中添加以下代码： ```typescript declare module &#39;*.vue&#39; { import type { DefineComponent } from &#39;vue&#39; const component: DefineComponent<{}, {}, any> export default component } ``` 或者，根据引用[2]和[4]的写法： ```typescript declare module "*.vue" { import type { DefineComponent } from "vue"; const vueComponent: DefineComponent<{}, {}, any>; export default vueComponent; } ``` 这两种写法本质相同，目的是告诉TypeScript：所有以.vue结尾的模块都是Vue组件，其类型为`DefineComponent`。 #### 步骤3: 确保TypeScript配置正确 检查`tsconfig.json`文件，确保声明文件被包含。通常，Vite创建的Vue+TS项目会自动包含`env.d.ts`。查看`tsconfig.json`中的`include`数组，应该包含类似`"**/*.ts"`, `"**/*.d.ts"`, `"**/*.tsx"`, `**/*.vue`（如果有的话）等。如果没有包含`*.d.ts`，可以添加： ```json "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ] ``` #### 步骤4: 检查IDE和插件 - 确保使用VSCode，并安装了Volar插件（Vue3官方推荐），同时禁用了Vetur插件（Vue2的插件，与Vue3不兼容）。 - 重启VSCode或重新加载窗口，以确保声明生效。 #### 步骤5: 重新启动项目 有时候，修改配置后需要重启开发服务器（`npm run dev`或`yarn dev`）。 ### 注意事项 - 如果项目是JavaScript项目（没有TypeScript），则可能不需要类型声明。但是，如果使用了Vite，并且IDE（如VSCode）有类型检查，则仍然可能需要这个声明来避免IDE报错。 - 在纯JavaScript项目中，可以尝试在`jsconfig.json`（如果有）中添加类似声明，但通常不需要，因为JavaScript不强制类型。不过，为了消除IDE警告，也可以创建`env.d.ts`并声明模块。 ### 示例代码 以引用[4]中的代码为例，在`src/env.d.ts`（或项目根目录的`env.d.ts`）中： ```typescript // env.d.ts declare module &#39;*.vue&#39; { import type { DefineComponent } from &#39;vue&#39; const component: DefineComponent<{}, {}, any> export default component } ``` ### 相关问题 §§相关问题§§ 1. 为什么Vue3项目需要单独声明.vue文件的类型？ 2. Volar插件和Vetur插件有什么区别？ 3. 如何在Vite项目中配置TypeScript支持？ 4. 除了.vue文件，还有哪些文件类型需要声明模块？ 5. 如果声明文件已经存在，但问题仍然存在，应该怎么办？ 通过以上步骤，应该能够解决模块找不到或类型声明错误的问题。如果问题依旧，请检查文件路径是否正确，以及声明文件是否被正确包含在TypeScript编译上下文中[^1][^2][^3][^4]。</think>### Vue 项目中模块导入错误解决方案 在 Vue3 + Vite + TS/JS 项目中遇到 **"找不到模块&#39;*.vue&#39;或其类型声明"** 错误，通常是由于 TypeScript 无法识别 `.vue` 文件的类型定义导致的。以下是具体解决方案： #### 解决方案步骤 1. **创建/修改类型声明文件** 在项目根目录或 `src` 目录下创建 `env.d.ts` 文件（若已存在则直接编辑），添加以下代码： ```typescript // env.d.ts declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; } ``` [^2][^4] 2. **检查 TypeScript 配置** 确保 `tsconfig.json` 包含类型声明文件： ```json { "compilerOptions": { "types": ["vite/client"] }, "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue" // 确保包含.vue文件 ] } ``` 3. **IDE 插件配置** - **VSCode 用户**：安装 [Volar 扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 并 **禁用 Vetur** - WebStorm：确保启用 TypeScript 支持 [^3] 4. **重启开发环境** 执行以下命令重启服务： ```bash npm run dev -- --force # 或 yarn dev --force ``` #### 不同场景处理 - **Vue3 + JavaScript 项目**： 只需创建 `env.d.ts`（步骤1），无需 `tsconfig.json` 配置[^1]。 - **Vite 特定配置**： 在 `vite.config.ts` 中添加类型检查： ```typescript // vite.config.ts export default defineConfig({ plugins: [vue()], resolve: { alias: { &#39;@&#39;: path.resolve(__dirname, &#39;./src&#39;) } } }) ``` #### 常见错误排查 | 现象 | 解决方法 | |------|----------| | 路径别名报错（@/） | 在 `tsconfig.json` 中添加 `"paths": { "@/*": ["src/*"] }` | | 声明文件未生效 | 检查文件位置（根目录/src目录）和文件名（env.d.ts） | | Vetur 未禁用 | 在 VSCode 扩展中禁用 Vetur | > **关键点**：声明文件必须使用 `declare module "*.vue"` 明确告诉 TypeScript 如何处理 `.vue` 文件[^2][^3][^4]。完成配置后建议重启 IDE 使变更生效。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值