解决vscode报Module ‘“XXXXX“‘ has no default export.Vetur提示问题

最新推荐文章于 2025-06-13 12:08:07 发布
最新推荐文章于 2025-06-13 12:08:07 发布
阅读量1.4k 收藏 1
点赞数 8
CC 4.0 BY-SA版权
分类专栏： Bug 文章标签： vscode vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42408481/article/details/139648276

一、现象

使用vue+ts启动项目之后标红提示，程序可以正常运行，看着难受，如下：

二、分析

语法提示插件的问题，vue2.x使用vetur插件，vue3.x更换成Vue-Official（原Volar）插件，可以更好的支持TS，以及有类型推导。

三、解决

1、禁用vetur插件

2、安装Vue-Official插件

3、重启vscode

【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】006 - Makefile 编译脚本 逐行深度解析
|~~~热爱生活、努力学习的小伙汁~~~|
06-15 1167
【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】006 - Makefile 编译脚本 逐行深度解析
手把手带你撸一遍vue-loader源码
vv_bug
07-31 3362
前言 前面写过两篇webpack实战的文章： webpack实战之（手把手教你从0开始搭建一个vue项目） 手把手教你从0开始搭建一个vue项目（完结） 强烈建议小伙伴们去看一下前面几个章节的内容， 这一节我们研究一下vue-loader。 介绍 Vue Loader 是什么？ Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： <template> <div class="example">
解决VsCode的 Vetur 插件has no default export Vetur问题
weixin_44784401的博客
02-11 1211
解决VsCode的 Vetur 插件has no default export Vetur问题
Module ‘“/xxxx/xxx/xxx/xx/Child.vue“‘ has no default export
m0_57547754的博客
01-06 2505
在父组件中引入子组件时，报错：Module '"/xxxx/xxx/xxx/xx/Child.vue"' has no default export。
vue3报错：Module ‘d:/code/vue2025/vue3-vite/src/components/HelloWorld.vue‘ has no default export.Vetur
滚滚_1016的程序媛
06-13 293
Settings--->搜索setting.json--->打开。
vscode vue3+uniapp报错Module ‘“d:/work/xx“‘ has no default export.
shmilyyxj的博客
04-09 608
2.在setting.json文件中添加"vetur.validation.script": false，页面引入不报红了。1.按快捷键 ctrl+p,搜索 setting.json。如下，导入组件报错，但是项目可以正常运行。网上查了很多方法，亲测成功的方案。
Module ‘“fs“‘ has no default export.
qq_57558631的博客
05-23 6934
出现这个错误的原因是： fs模块没有默认导出。事实上，fs模块的确没有默认导出。因为fs是遵循cjs规范写的。即类似于这种导出： module.exports = fs = { readFile, readFileSync, ... } 而如果直接使用 import fs from 'fs' 1 就会导致出现标题中的错误（TS编译情况下）。 固导包的时候需要使用如下的方法： import * as fs from 'fs' 1 看起来有些麻烦，事实上，如果尝试使用b...
vue3项目报错Module ‘“xx.vue“‘ has no default export.Vetur
前端小伍的博客
03-08 1549
使用这种方式导入的组件不会再报刚刚那个错误。
解决VSCode的Vetur插件has no default export问题
applebomb的专栏
12-26 6168
由于有vue2和vue3的项目，本人VSCode同时使用了vetur和volar插件，但是在vue3引入其他模块时，报了错误 Module '"xxxx.vue"' has no default export. 的错误，实际运行时没问题的，但是看得糟心。 翻了下google，只要在设置里，设置 "vetur.validation.script": false 就解决了，这里记录一笔 ...
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
桌面PC/服务器 ubuntu18.04 Linux内核编译升级与机制分析
tugouxp的专栏
06-06 6597
1.下载内核并且解压安装依赖2.执行make menuconfig，并不修改，使用默认然后退出,默认使用的配置是x86_64_defconfig还可以拷贝/boot/目录下的既有的config文件来作为编译内核的配置文件来编译。但是需要两个内核版本号差别不大，可以互通使用。将CONFIG_SYSTEM_TRUSTED_KEYS字符串置空。3.执行make -j4因为之前编译过，再次编译输出很少4.执行sudo make modules_install。
VScode+Anacanda+tensorflow安装和初步使用历程(汇总)
qq_41969180的博客
05-19 3472
这是我这个小白安装VScode+Anacanda+tensorflow时遇到的问题汇总以及解决链接： 1.用Anaconda+VSCode配置tensorflow开发环境 教程链接(等等，在跳转链接前，建议往后看完abcd问题)： https://blog.csdn.net/qq_41662115/java/article/details/86420983 (VScode创建python文件，新建文件加.py后缀就是python文件啦) 看看这，添加该教程链接里未提到的几个问题： a.Anaconda3安装
TypeScript 错误 “Module ‘...index‘ has no default export”
q1ngqingsky的博客
03-04 5109
“Module ‘...index‘ has no default export” { "compilerOptions": { "allowSyntheticDefaultImports": true } }
Module ‘xx’ has no default export.Vetur(1192) 错误提示
zhangyibiao11的博客
02-09 1165
如果你正在使用 Vue 3 和 TypeScript，推荐使用 **Vue - Official** 插件（即 Volar），因为它提供了更好的支持。- 如果项目中使用了 TypeScript，Vetur 可能无法正确处理 `.vue` 文件中的 TypeScript 代码，从而导致错误提示。- 如果使用了 `<script setup>`，确保没有遗漏必要的导出语句（虽然在 Vue 3 中通常不需要显式导出）。- 安装 Volar 插件（当前官方插件名称为 **Vue - Official**）。
TypeScript 错误 “Module '...index' has no default export”
热门推荐
shrenk的专栏
07-16 2万+
错误信息备忘。 这是因为sp-dialog模块没有声明任何的default导出对象。所以在import的时候，需要使用大括号，在里面指定导入的对象。如果不想加大括号，需要在定义类的时候使用default关键字：export default class ... 解决办法有两个，一个补上大括号： 另一个是使用*号导入所有：   这个问题涉及到ES6中的两个概念，一个是默认导入（d...
VSCode报错Module ‘“xx.vue“‘ has no default export.Vetur(1192)
qq_48617322的博客
01-02 1005
Vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持，但他只适用于对vue2语法的高亮提示，对于vue3这个插件多多少少有那么些不适配。对于vue3语法，官方推荐 Volar，简单的说Volar是Vetur的升级版本，提供了更好的功能并有更好的TS支持。然后我搜索了一下，发现Volar已经被弃用了，官方拓展已经变成了Vue - Official。卸载Vetur，安装Vue - Official插件，重启VS Code。错误提示中可以看到关键字。
Vue3项目中出现 Module ‘“d:/Projectxxxx.vue“‘ has no default export.
晨曦博客
04-13 1038
解决方案：
vue3+ts+vite中 import报错：Moudle ... has no default export
poguanba的博客
09-19 3031
我在网上也找了很多文章的解决办法，但都不太管用，直到发现了一个解决办法是说插件的问题，vetur新版本不适用vue3，将该插件禁用，使用Vue Language Features就可以完美解决了，我抱着试一试的心态，没想到成功了。
Module ‘“/src/components/xxx.vue“‘ has no default export.Vetur(1192）自己写的组件在使用时编辑器出现标红
m0_65354547的博客
01-10 835
Module '"/src/components/xxx.vue"' has no default export.Vetur(1192）自己写的组件在使用时编辑器出现标红
Module '"c:/Users/l30077816/Desktop/portal.web/src/components/avatar/index.vue"' has no default export.Vetur(1192) import Avatar 引入组件vscode ide一直提示,这是怎么回事？怎么解决？
最新发布
07-23
<think>我们正在处理一个Vue开发中的常见错误：在VSCode中使用Vetur插件时，遇到"Module 'xx.vue' has no default export.Vetur(1192)"的错误。 根据引用内容，这个错误通常发生在导入Vue组件时，比如：`import HelloWorld from './components/HelloWorld.vue'`，而Vetur提示该模块没有默认导出。 原因分析： 在Vue单文件组件(SFC)中，通常我们使用`export default`来导出组件对象。但是，当使用Vetur插件时，它可能期望组件以默认导出的形式存在，否则就会报这个错误。 然而，根据引用[3]的提示，Vetur插件已经被Vue官方的新插件（Vue - Official）所取代，并且有用户反馈在切换插件后问题得到解决。 解决方案： 1. 检查组件文件：确保你的Vue组件中使用了`export default`。例如： ```vue <script> export default { name: 'HelloWorld' // ... 其他选项 } </script> ``` 2. 如果确认组件导出正确，那么问题可能出在Vetur插件上。引用[3]提到，Volar（Vue Language Tools）已经取代了Vetur，并且Vetur已经被弃用。因此，可以尝试卸载Vetur，安装Vue官方的新插件（Vue - Official）： - 在VSCode中卸载Vetur插件。 - 安装Vue - Official插件（由Vue团队发布）。 - 重启VSCode。 3. 另外，引用[2]中提到，有时错误信息会提示设置`moduleResolution`为`node`或添加路径别名。这可能是由于TypeScript配置问题导致的。因此，检查`tsconfig.json`（如果使用TypeScript）或`jsconfig.json`（如果使用JavaScript）中的配置： - 确保`moduleResolution`设置为`node`（对于TypeScript项目）。 - 如果使用了路径别名，确保在配置文件中正确配置了`paths`。 例如，在`tsconfig.json`中： ```json { "compilerOptions": { "moduleResolution": "node", "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 4. 如果问题仍然存在，尝试在VSCode中按下`Ctrl+Shift+P`（Windows/Linux）或`Cmd+Shift+P`（Mac），然后输入“Reload Window”重新加载窗口。 5. 如果使用的是Vue 3，确保在`vue-loader`等构建工具配置正确，并且VSCode使用的是工作区根目录下的TypeScript版本（如果有的话）。 总结：优先尝试更换插件，因为Vetur已经不再维护，而Vue - Official插件（即Volar的集成）是官方推荐并持续更新的。 注意：如果项目中使用的是TypeScript，并且使用了Vue 3，那么Vue - Official插件（Volar）是必需的，它提供了更好的类型支持。 如果以上步骤还不能解决问题，请检查项目依赖是否安装正确，特别是与Vue和TypeScript相关的依赖。 根据引用内容，我们主要参考了引用[2]和引用[3]提供的解决方案。 相关问题： 1. 如何配置VSCode以更好地支持Vue 3开发？ 2. Vue单文件组件(SFC)的导出方式有哪些？ 3. 在Vue项目中如何使用TypeScript路径别名？</think>### Vue 组件引入错误 "Module has no default export Vetur(1192)" 解决方案 此错误通常发生在使用 VSCode 开发 Vue 项目时，Vetur 插件无法识别组件的默认导出。以下是分步解决方案： #### 1️⃣ **检查组件导出格式（首要步骤）** 确保 Vue 组件使用 `export default` 导出： ```vue <!-- 正确示例 --> <script> export default { name: 'HelloWorld' } </script> <!-- 错误示例（会导致报错） --> <script> export const HelloWorld = { ... } // ❌ 没有默认导出 </script> ``` #### 2️⃣ **切换 VSCode 插件（推荐方案）** Vetur 已逐渐被官方插件取代： 1. 卸载 Vetur 插件 2. 安装官方插件：[Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 3. 按 `Ctrl+Shift+P` > 执行 `>Volar: Switch Take Over Mode`（解决兼容问题） 4. 重启 VSCode（多数用户反馈此方法可彻底解决问题[^3]） #### 3️⃣ **配置 TypeScript（TS 项目专用）** 在 `tsconfig.json` 中添加： ```json { "compilerOptions": { "moduleResolution": "node", // 关键配置 "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*": ["src/*"] // 路径别名 } } } ``` #### 4️⃣ **检查导入语法** ```javascript // 正确 ✅ import HelloWorld from '@/components/HelloWorld.vue' // 错误 ❌（会导致 Vetur 1192） import { HelloWorld } from '@/components/HelloWorld.vue' ``` #### 5️⃣ **验证文件扩展名** 确保导入路径包含 `.vue` 扩展名： ```diff - import HelloWorld from './components/HelloWorld' + import HelloWorld from './components/HelloWorld.vue' ``` #### 6️⃣ **终极排查方案** 若仍报错： 1. 删除 `node_modules` 和 `package-lock.json` 2. 执行 `npm install` 3. 重启 VSCode 并检查 Vue 版本： ```bash vue --version # 确保 Vue CLI ≥ 4.5 ``` > **原理说明**：Vetur 对 Vue 3 的默认导出检测存在缺陷，而 Volar 是 Vue 官方专为 Vue 3 开发的替代插件，能正确解析 SFC 组件结构[^3]。 --- ### 相关问题 1. 如何配置 Volar 插件在 Vue 3 项目中的高级功能？ 2. Vue 单文件组件(SFC)中 `<script setup>` 和传统导出的区别是什么？ 3. 当 TypeScript 报错 "Cannot find module '@/components/xxx.vue'" 时应如何解决？ 4. 如何在 Vue 项目中正确配置路径别名以避免导入错误？ 5. Vue 3 项目迁移时常见的 VSCode 兼容性问题有哪些？ [^1]: 典型错误信息示例：`Module ‘“xx.vue“‘ has no default export.Vetur(1192)` [^2]: 相关解决方案参考：设置 `moduleResolution` 或添加路径别名 [^3]: 官方推荐方案：卸载 Vetur 安装 Volar 插件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值