vue3+ts项目中导入组件时报错has no default export

最新推荐文章于 2024-04-30 17:49:20 发布
最新推荐文章于 2024-04-30 17:49:20 发布
阅读量535 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56042158/article/details/137226641
版权

问题描述

// 下面这句会标红
import WorkItemDetails from "./components/details/index.vue";

报错是该组件没有导出，即"components/details/index.vue"has no default export.

报错原因

使用vetur这个插件（我目前的版本是0.37.3，应该是这个版本之前的都不支持）。具体是不支持vue3还是不支持ts大家可以自己试验下。

解决办法

禁用vetur插件，启用Volar这个插件

嚼碎871
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vetur：用于VS Code的Vue工具
02-02
威图 VS Code的Vue工具。 ：Vue语言服务器 ：Vetur终端接口 :party_popper: VueConf 2017 和 :party_popper: 赞助商 我辞去了Nomad旅行，从事开源工作以及进行独立学习/研究的工作。 Vetur是我在开源方面的主要重点。 您的帮助将减轻我的财务负担，并使我有更多时间在Vetur上工作。 谢谢 :folded_hands: 感谢以下公司支持Vetur的发展： 从IDE内部请求并执行代码审查。 复查任何代码（即使这是尚未提交的正在进行的工作），并使用跳转到定义，您喜欢的键绑定和其他IDE工具。 。 产品特点 ：流行的Vue框架和您自己的自定义组件的自动完成和悬停信息 ：Vue模板中的自动完成，悬停信息和类型检查 ：CLI上的表面模板类型检查错误 ：支持定义全局组件。 快速开始 安装 。 与一起。 请参阅页面进行设置。 请参阅每个功能自己的页面以设置特定功能。 常问问题 局限性 Vetur速度慢（ ）时，您可以重新启动Vue语言服务 纱线pnp（ ） 路线图 参见 。 贡献 参见 执照 麻省理工学院:co
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3 import报错：has no default export
热门推荐
huanglgln的专栏
12-07 1万+
vue3 报错：has no default export
vue3 Vetur报错：has no default export 组件没有默认导出
XUELINGMM的博客
05-18 5409
在vue3项目ts写法报错组件没有默认导出，这种情况代码本身没有问题，程序能正常执行，对于强迫症的我表示看得很难受。
vue3+ts实战项目组件工具库.zip
03-03
vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
Module ‘“fs“‘ has no default export.
qq_57558631的博客
05-23 6623
出现这个错误的原因是： fs模块没有默认导出。事实上，fs模块的确没有默认导出。因为fs是遵循cjs规范写的。即类似于这种导出： module.exports = fs = { readFile, readFileSync, ... } 而如果直接使用 import fs from 'fs' 1 就会导致出现标题中的错误（TS编译情况下）。 固导包的时候需要使用如下的方法： import * as fs from 'fs' 1 看起来有些麻烦，事实上，如果尝试使用b...
Module ‘“xx.vue“‘ has no default export.Vetur(1192)
pobu168的博客
11-26 1万+
使用Vue3测试时有如下代码： <script lang="ts" setup="props"> import HelloWorld from './components/HelloWorld.vue' </script> <template> <HelloWorld/> </template> 简单的代码附件了一些看着不爽的提示，虽然不影响正常运行： 具体的错误信息如下： import HelloWorld from './comp
解决VSCode的Vetur插件has no default export问题
applebomb的专栏
12-26 5306
由于有vue2和vue3的项目，本人VSCode同时使用了vetur和volar插件，但是在vue3引入其他模块时，报了错误 Module '"xxxx.vue"' has no default export. 的错误，实际运行时没问题的，但是看得糟心。 翻了下google，只要在设置里，设置 "vetur.validation.script": false 就解决了，这里记录一笔 ...
vue3中引用组件提示has no default export问题解决
最新发布
Z_Joker_J的博客
04-30 683
手动下载volar的vsix文件，修改文件中对vscode的支持版本（当前安装的vscode版本）是vscode安装的vetur不支持ts写法导致的，换成vscode最新支持的volar就行。然后利用这样那样的方式把vsix文件导入vscode。经排查，该错误提示的真正原因并不是组件没有默认导出，因为这种实现方式无需导出。已知该问题提示的中文解释是指向：组件没有默认导出。
vue3在引入组件时报‘has no default export‘,翻译过来的意思就是没有进行默认导出
weixin_53042678的博客
04-27 423
添加 "vetur.validation.script": false,重启Vscode即可生效。这个解决的方法也很简单，点击Vscode左下角的设置。
vue3+vite+typescript的项目中报错Module '"e:/Vue3/Project/vite-project/src/components/HelloWorld.vue"' has no default export.
07-28
在vue3+vite+typescript的项目中，如果你在引入组件时遇到了"Module 'xxx' has no default export"的错误，这通常是因为你的组件没有默认导出。这个错误可能是由于以下几个原因导致的： 1. 在你的组件文件中，没有使用`export default`导出组件。请确保你的组件文件中使用了`export default`来导出组件。例如，在你的`HelloWorld.vue`组件文件中，你应该有类似以下的代码： ```javascript <script lang="ts"> export default { // 组件的定义 } </script> ``` 2. 在你的组件文件中，使用了命名导出而不是默认导出。请确保你的组件文件中只有一个默认导出。如果你使用了命名导出，那么在引入组件时，你需要使用相应的名称来导入组件。例如，在你的`HelloWorld.vue`组件文件中，如果你使用了命名导出，你应该有类似以下的代码： ```javascript <script lang="ts"> export const HelloWorld = { // 组件的定义 } </script> ``` 然后，在引入组件时，你需要使用`import { HelloWorld } from 'xxx'`来导入组件。 请检查你的组件文件，确保你使用了正确的导出方式，并根据需要进行相应的修改。这样应该能够解决"Module 'xxx' has no default export"的错误。 #### 引用[.reference_title] - *1* [前端知识分享——Vue3 + Vite + TypeScript 搭建基础项目](https://blog.csdn.net/sinat_43095140/article/details/123860730)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue.js 3 + Vite + TypeScript 实战项目开发](https://blog.csdn.net/woyebuzhidao321/article/details/120732028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值