vue3使用import引入组件报Internal server error: Failed to resolve import “@/components/xxx“错误

最新推荐文章于 2024-09-26 15:44:43 发布
最新推荐文章于 2024-09-26 15:44:43 发布
阅读量7.8k 收藏 6
点赞数 9
分类专栏： Vue3 vue3组件报错 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hua_ban_yu/article/details/137791113
版权
本文讲述了在使用Vue3和TypeScript构建项目时，遇到[vite]InternalServerError关于组件导入失败的问题。解决方法包括在vite.config.ts中添加支持.vue文件的扩展，或者在引入组件时添加.vue后缀。
摘要由CSDN通过智能技术生成

使用vue3 + ts搭建项目，引入vue组件时报，[vite] Internal server error: Failed to resolve import "@/components/home/HomeSearch" from "src/views/HomeView.vue". Does the file exist? 错误

原因：直接引入vue组件但没有在vite.config.ts文件配置扩展

解决方案：

方案1、在vite.config.ts文件中添加扩展，保存后重新运行即可

extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],

方案2：

引入组件添加.vue后缀，如图

hua_ban_yu
关注
专栏目录
Vue3 - Element Plus 报错 Internal server error: failed to resolve import “element-plus/es“ from “x“, D
王佳斌
05-11 3899
vue3，element-plus，unplugin-vue-components，自动导入报错，自动引入报错，vue3+vite自动引入element组件出现错误，vite，webpack，如何解决这个问题，Internal server error: failed to resolve import "element-plus/es" from "x", Does the file exist?，配置自动引入element组件控制台报错，Vue3+ElementPlus，vue3+vite如何实现自动引
[vite] Internal server error: Failed to resolve import “@/src/config/index“ from “src/api/request.j
yuanmenglxb2004的博客
07-22 1683
用vue3引入配置组件config时，报错说 [vite] Internal server error: Failed to resolve import "@/src/config/index" from "src/api/request.js". Does the file exist?但在许多前端项目中，它通常被配置为一个别名（alias），指向项目中的某个特定目录，比如。我又查了一下用./和@/来引入文件的区别，以及用@引入文件报错用./引入文件却可以，为什么会这样。当你在一个文件中使用。
[vite] Internal server error: Failed to resolve import “@api/disaster/riskMonitoring“ from “src\serv
it_bird1999的博客
09-15 4363
[vite] Internal server error: Failed to resolve import "@api/disaster/riskMonitoring" from "src\service\index.ts". Does the file exist?
Vue3中报错：[@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment...
最新发布
觉醒法师的专栏
09-26 1078
遇到了[vite] Internal server error: [@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.错误。
Vue.js报错Failed to resolve filter问题的解决方法
10-22
主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下
Internal server error原因分析
liutao2016的博客
11-14 9691
错误描述： 使用apache环境开发时，时不时会遇到"internal server error500"，按照翻译，应该是服务器内部错误，难道apache出错了，Apache破损了，答案显然不是这样的，实际上，就是apache无法正常解析文件，所以就抛出这个错误。 原因分析： 产生这个错误的原因一般就是3点： 第一，权限配置问题，文件没有权限进行读取，就会抛出这个错误，这个原因在linux
vue3中导入子组件报错
zhaoyin1994的博客
06-07 432
项目报错：父子组件通信中，导入子组件报错提示：Internal server error: Failed to resolve import "@components/son-com.vue" from "src/App.vue". Does the file exist?
[vite] Internal server error: Failed to resolve import “D:/Program Files (x86)/星球项目/yupao-frontend/n
JEREMY的博客
05-10 5236
【代码】[vite] Internal server error: Failed to resolve import "D:/Program Files (x86)/星球项目/yupao-frontend/n。
Failed to resolve module import “@/components/MySwiper.vue“. (imported by /src/main.js)
song_song0927的博客
11-20 4023
最近学习vue3，使用vite创建了项目，在main.js中导入组件的时候，按照vue2的习惯写了@ 但是发现报错，如下图 我按照其他大神说的在项目的根目录下创建并配置了vite.config.js，就是把@配置为src路径，还是报上面的错误，vite.config.js的代码如下 const { resolve } = require('path'); export default { alias: { '/@/': resolve(__dirname, './src'),
Vue3 框架使用报错以及解决办法
热门推荐
chenacxz的博客
08-20 1万+
el-submenu,但是显示出了问题，不能正常显示。感觉是这个组件的问题，查了一圈没找到解决方法，最后看官方文档发现el-submenu变成了el-sub-menu。7、vue.config.ts import path from 'path' 配置报错。8、vue3+element-plus里面的el-submenu组件显示问题。4、yarn add element-plus --save报错。引入组件时，没有添加.vue后缀 或者引入的组建没有被使用。3、cnpm安装element-plus报错。..
[vite] Internal server error: Failed to resolve import
LD77547231的博客
08-24 1812
这一步是在vite的项目的文件中， 配置按需引入插件报错启动项目报错。
解决vue 引入子组件报错的问题
10-18
今天小编就为大家分享一篇解决vue 引入子组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
yilingsj的博客
06-02 7714
公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript
Vue源码解读（五）：render和VNode
qq_35500568的博客
09-18 912
Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM。 在 Vue 1.0 中视图的更新是纯响应式的。在进行响应式初始化的时候，一个响应式数据 key 会创建一个对应的 dep，这个 key 在模板中被引用几次就会创建几个 watcher。也就是一个 key 对应一个 dep，dep 内管理一个或者多个 watcher。由于 watcher 和 DOM 是一对一的关系，更新时，可以明确的对某个 DOM 进行更新，更新效率还是很高的。 随着应用越来越大，组件越来越多，一个组件就可能存在大量的
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2806
09Vue中使用样式---class.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>09Vue中使用样式----class</title> <script type="text/javascript
社招前端vue面试题汇总
bb_xiaxia1998的博客
12-07 834
1. pinia是什么？2. 为什么要使用pinia？3. pinna使用pinna文档(opens new window)我们这里搭建一个最新的项目 基础使用 2.1 创建 创建很简单，调用p中的函数即可，该函数接收两个参数：我们可以定义任意数量的，因为我们其实一个就是一个函数，这也是的好处之一，让我们的代码扁平化了，这和的实现思想是一样的2.2 使用 2.3 添加 2.4 读取数据 上段代码中我们直接通过等方式获取到了存储的值，但是大家有没有发现，这样比较繁琐，我们其实可以用解构的方式来获取值，
Vue 08使用v-model实现计算器
mqingo的博客
01-02 630
08使用v-model实现计算器.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08使用v-model实现计算器</title> <script type="text/javascript&quot
element+ 引入图标报错 Failed to resolve import “@element-plus/icons-vue“ from “
IU
03-29 709
vue3.0中Element+的使用
Element-plus下载报错
weixin_45127611的博客
03-27 3730
一个正经的vue3项目在windows上跑着正常但是在linux下用的vscode跑不起来了报错信息如下： [vite] Internal server error: Failed to resolve import “element-plus/lib/locale/lang/zh-CN.js” from “src/main.js”. Does the file exist? Plugin: vite:import-analysis File: …/src/main.js 31 | import
Internal server error: Failed to resolve import "@/mixins/JeecgListMixin" from "src\views\specialty\SpecialtyList.vue". Does the file exist?
05-16
这个错误提示可能是因为在 `SpecialtyList.vue` 文件中使用了 `@/mixins/JeecgListMixin` 的导入方式，但是 Vue CLI 默认没有配置 `@` 别名，需要手动添加。 你可以在项目根目录下的 `vue.config.js` 文件中添加以下代码： ```javascript module.exports = { chainWebpack: config => { config.resolve.alias.set('@', resolve('src')) } } ``` 这样就可以在项目中使用 `@` 别名代替 `src` 目录了。如果还有问题，可以提供更多代码或者错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值