利用 Vite 初始化 Vue3 项目踩坑

最新推荐文章于 2024-11-13 15:49:45 发布
原创 最新推荐文章于 2024-11-13 15:49:45 发布 · 472 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了在开发过程中遇到的dev报错问题，原因是版本不匹配。解决方法包括降低vitejs/plugin-vue和vite版本，确保node.js版本对应，删除并重新下载node_modules依赖，最后重启项目即可解决问题。

启动 dev 报错：

原因：版本不匹配：

目前版本：

 解决方案：降低 vitejs/plungin-vue、vite 版本。（把 node.js 版本改成与原来的 vite 的版本匹配应该也可以）

将原来的 node_modules 依赖删除后重新下载依赖。

重新启动即可

npm init vite@latest； 项目名字是abcde，选了vue-ts； cd abcde； npm install； npm run dev；浏览器访问，结果是空白的，这是怎么回事？
福大大架构师每日一题
07-25 1万+
这两种方法都可以解决vite，npmrundev白屏的问题。建议采用方法一，直接更新浏览器版本。方法二降低vite的版本。npminitvite@2.8.0就行。后来发现是浏览器版本的问题，低版本浏览器不支持js的高级语法。方法一换成高版本浏览器就没问题了。浏览器访问，结果是空白的，这是怎么回事？项目名字是abcde，选了vue-ts。......
vite创建vue3 npm run dev 和 yarn dev报错 vite 不是内部或外部命令，也不是可运行的程序
SdShuooo的博客
10-16 5910
'vite' 不是内部或外部命令，也不是可运行的程序，并且没有package-lock.json文件
关于vue3.0 + vite的坑（持续更新，有问题在下面留言，解决过的我可以帮忙）
sebeefe的博客
03-09 431
多的数不胜数,而且我也没看出来用了setup函数能解决代码是屎山的问题 最大的坑是第三方组件库还不支持vue3.x的问题 这个问题还没找到解决方案，有没有老哥知道怎么让vue2的第三方库兼容vue3项目的可以加个群讨论一下，这个坑绕不过去很多项目只能乖乖用vue2，当然一些小项目还是可以拿来练手的，尤其H5页面这种，可以预知风险的，大项目真的不推荐，你不知道哪天项目经理从哪里看来一个方案说人家做的了，你用vue3，你引不了库，芜湖van蛋 打包不了可能是这个问题 相继引入了vue-router,vuex,e
Vue3项目启动失败的解决方案
2302_80695016的博客
08-27 1621
Vue3项目启动vite不是命令行，纤细解决办法，有用
vite搭建vue3项目prettier格式化报错
Shiqi_777的博客
08-02 1076
eslintrc.js被视为ES模块文件，因为它是一个.js文件，其最近的父package.json包含“type”：“module”，它将该包范围内的所有.js文件声明为ES模块。相反，将.eslintrc.js重命名为以.cjs结尾，将所需代码更改为使用所有CommonJS模块中可用的dynamicimport（），或将D:\...\package.json中的“type”：“module”更改为“type”“CommonJS”，将所有.js文件视为CommonJS（所有ES模块均使用.mjs）。
从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
on1yLX的博客
08-09 1292
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。
(一) Vue3 + Vite + TS 项目搭建
Bao59的博客
01-25 1213
Vue3 + Vite + TS 项目搭建
Vue3 + Vite + Electron 创建桌面应用
m0_59614183的博客
07-26 1052
8.输入指令npmstart预览效果。如果失败Error，以下解决方案可能有效。5.新建文件preload.js。4.新建文件main.js。3.安装electron。6.修改packjson。此为自己踩坑笔记，参考链接。1.创建vite项目。
vue2.7.14 + vant + vue cli脚手架转vite启动运行问题记录
最新发布
weixin_44846945的博客
11-13 1575
vue cli 脚手架转成vite启动简单说说这个项目的一些底层基本结构哈，以及写这篇博客的目的。这个项目底层结构是vue2.7.14 + vant ，使用vue cli脚手架搭建的一个H5项目，由于内容比较多，并没有使用vue3重构，但是由于内容过多，渐渐的启动特别耗时，所以计划该用vite去优化启动项。写这篇博客，是记录本人在这个转换过程中遇到的一些问题。在实际的过程中我用了两种方案，第一种利用插件webpack-to-vite。第二种是自己搭建vite。
Vite+Vue+TS使用Electron 极限踩坑，Webstorm WSL，Linux下build Electron Windows
qq_44652876的博客
11-29 1376
Vue打包Windows，Vite+Vue+TS使用Electron 极限踩坑，Webstorm WSL，Linux下build Electron Windows 方案
Vue3报错：Failed to fetch dynamically imported module
热门推荐
海风依旧
12-07 10万+
Vue3报错：Failed to fetch dynamically imported module解决
猫头虎分享已解决Bug || Vue3报错: Failed to fetch dynamically imported module
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
12-18 5653
前端世界充满了挑战，特别是在处理诸如Vue3的动态模块导入时。最近，我在使用Vue3时遇到了一个报错：“Failed to fetch dynamically imported module”。这不仅仅是一个小问题，而是对我们代码整体架构的考验。作为猫头虎博主，我不仅解决了这个Bug，还深入挖掘了其背后的原因。现在，让我带你一探究竟！错误类型原因解决方案模块路径错误错误的文件路径校验和纠正路径网络问题CDN配置错误校验网络连接和CDN配置打包工具配置问题配置不支持动态导入。
❤Node中间件multer的认识安装
林太白
06-25 6466
❤Node中间件multer的认识安装
vue3+ts Typerror: Failed to fetch dynamically imported module
qq_57952018的博客
12-13 4212
上面的办法也只是权宜之计 并不是最完美的办法，目前vite官方也没有解决这个问题。希望官方给大家一个解决的办法吧。
Vue3+TS错误解决 Failed to fetch dynamically imported module:
weixin_45791692的博客
04-12 4万+
Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.
vue3+vite - 报错TypeError: Failed to fetch dynamically imported module: xx，vue3项目报错无法获取动态导入的模块，vite报错！
高级前端工程师
07-06 1万+
vue3，vite，vite-plugin-vue，nuxt3，报错，TypeError: Failed to fetch dynamically imported module，无法获取动态导入的模块，vue3打包报错，vue3编译运行报错，如何解决错误，vite build打包以后报错Failed to fetch，Vue3报错详细解决，Vue3+TS错误解决，换浏览器，清缓存，退出登录重新登陆，文件路径没写对，要么是没加组件名的后缀vue，路径写错了，加了setup语法糖导致的这个报错，eslint，
vite,动态路由失败报错Failed to fetch dynamically imported module: http://xxxxx/@/views/app/xxxxxxx
m0_46621307的博客
08-17 3914
3、第三种写法，找出目录下的所有的.vue文件，与返回的路由地址做匹配，vite 打包后，完美解决。2、defineAsyncComponent组件的方式，vite 打包报错。
vite生产环境报错，TypeError: Failed to fetch dynamically imported module: xxx
weixin_40231341的博客
08-04 3049
1.问题描述vue + vite项目：有时跳转页面会卡住，但刷新一下页面又恢复正常，控制台信息如下：TypeError: Failed to fetch dynamically imported module: xxx2.信息收集用户端复现了问题，从现场获取到控制台日志：img_16739282021590.png3.问题...
使用vite初始化vue3项目
04-28
好的，以下是使用 Vite 初始化 Vue 3 项目的步骤： 1. 首先，确保你的电脑已经安装了 Node.js 和 npm 包管理器。 2. 打开命令行工具，进入你想要创建项目的目录。 3. 运行以下命令安装 Vite： ``` npm install...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值