vue3+vite创建路由页面空白问题

最新推荐文章于 2024-05-08 22:23:50 发布
最新推荐文章于 2024-05-08 22:23:50 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 前端学习 新手村 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56733569/article/details/128836550
版权

用vite创建vue3项目后，开始配置路由页面，反复检查了很多次代码都没有错，但是页面就是空白，我在后台发现报了一个错：

 index.js:2 Uncaught SyntaxError: The requested module'/node_modules/.vite/d

在这里插入图片描述

找了好久才找到解决的办法，记录一下： 运行下面两个命令之后就可以正常显示页面了，而且也不会再报错

npm uninstall vue-router

npm install vue<
最低0.47元/天 解锁文章
燕哥学前端
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
使用vite打包的vue3 ，页面展示为空白
最新发布
qq_54601164的博客
05-08 473
vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置。vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；需要安装vite插件@vitejs/plugin-legacy。安装成功之后在vit.config.js引入并使用。起因：想看一下做的项目的静态版本。
vue 路由跳转，地址栏变化但是页面没有跳转
sky_sunshine_x的博客
11-26 1万+
1.可能是由于子路由没有渲染 没有<router-view></router-view>，导致子路由没法渲染。添加<router-view></router-view>。
Vue3动态路由解决白屏问题
Miketutu的博客
05-17 1223
Vue3动态路由解决白屏问题
vue3+vite动态权限路由，路由跳转了页面没有渲染，直接空白（后台管理项目）
QIAO_hh的博客
05-11 1959
vue3+vite动态权限路由，路由跳转了页面没有渲染，直接空白（后台管理项目）
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/...‘ does not provide an export ...
热门推荐
m0_57855994的博客
07-18 1万+
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=84e66e8d' does not provide an export named 'Vue' (at main.js:9:10)
解决Vue3动态添加路由后刷新白屏的问题
白的夜的博客
07-19 3290
使用router.addRoute()动态添加路由后正常点击没问题，一刷新就白屏。原因：路由守卫放行的时候，动态路由组件还没有渲染完毕。
vue3实现动态菜单和动态路由和刷新后白屏处理
bu_xiang_tutou的博客
03-12 6382
项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。
Vue3+Vite+ElementPlus实战商城后台管理系统开发.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
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+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4444
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
Vue3 + Vite 页面白屏问题（开发环境+生产环境）
Yana's Blog
05-06 7231
在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。
Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决
04-11 7391
添加 base，意思是 build 之后的外部资源都从当前目录的相对路径获取。我不知道是什么原理哈，反正是管用，之前在没有使用。中关闭这个选项的，所以差不多的事应该。这样在 build 之后就能正常显示了。
真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！
qq_37150410的博客
11-24 1万+
Vue3动态路由刷新后失效真正可行的解决方案！
vite vue3 vue-router 动态加载菜单，解决浏览器刷新后界面空白问题
dugucike的专栏
04-19 2202
app.use(store) //再加载store,vuex中的store刷新后清空，否则把菜单放store里面也可以，如果使用vuex持久化插件，router和store的加载顺序得改过来。//进入路由守卫生再加载一次，因为路由间的转向不整体刷新网页，不执行上面的全新加载函数，比如，登陆前，本地前没有存放菜单数据，登陆后还未执行菜单数据拉取，这时候菜单可能为空。//加载菜单,验证是否登陆，登陆则发送加载菜单请求，否则不发送。//如刷新，重新从localstorage加载菜单。//从本地菜单数据加载菜单。
Vue3+vite addRoute动态路由刷新空白页面
m0_46101540的博客
11-28 922
Vue3+vite addRoute动态路由刷新空白页面
vue3+vite动态路由使用参数会报错
05-11
可能是因为在 Vue3 + Vite 中，动态路由使用参数的方式有所不同。以前在 Vue2 + Vue-Router 中，我们可以使用 $route.params 来访问动态路由中的参数。但在 Vue3 + Vue-Router 4 中，$route.params 已经被移除了。相反，我们可以使用一个叫做 useRoute() 的新钩子来访问动态路由参数。 使用 useRoute() 钩子的示例代码如下： ```javascript import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() console.log(route.params) // 输出动态路由参数 } } ``` 另外，如果你使用的是 Vue3 + Vue-Router 3.x，那么 $route.params 仍然是可用的。如果你还是遇到问题，可以贴出具体的报错信息，这样我可以更好地帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值