关于vue页面 刷新后变为空白页的问题

最新推荐文章于 2024-01-03 18:01:43 发布
最新推荐文章于 2024-01-03 18:01:43 发布
阅读量7.8k 收藏 4
点赞数 1
分类专栏： vueCli项目学习材料 文章标签： vue router baseUrl 白屏 刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43311271/article/details/101367397
版权

描述：
在现做项目中，由于公司需要求vue-router模式需要更改为 history模式，发现二级路由刷新直接白屏
打开控制台发现报错
在这里插入图片描述
经排查发现：
history模式时，以/开头的嵌套路径会被当做根据经
故： 更改vue.confige.js

baseUrl: '/',

而在hash模式时，项目的根目录是不变的应为

baseUrl: './',
空、
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
刚创建的vue2项目路由是空白页的原因
YingUser的博客
05-03 949
1、创建路由 router/index.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routers = [ { path: "/", redirect: "/home", }, //设置默认指向的路径 { path: "/home", component: () => import('../pages/home.
vue主动刷新页面及列表数据删除后的刷新实例
10-18
今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue2强制刷新,解决页面不会重新渲染的问题
10-16
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue页面刷新记住页面状态的实现
10-15
主要介绍了Vue页面刷新记住页面状态的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目路由为 history 模式时， 线上环境刷新后空白页或404
qq_60990876的博客
09-22 3190
则是因为资源的基础路径出现了问题。需要修改vite.config.ts文件，将base改为 / 而不是 ./。如果有 .env.production 文件，是将该文件的VITE_BASE_URL更改 ，若改.env.development 文件或 .env 文件 则无效。nginx配置如下:重点在于 加上 try_files $uri $uri/ /index.html;本地没问题，部署到测试环境或线上后 刷新后空白页。前面莫名其妙加上了当前地址的第一级路由的地址。所以拿不到正确的资源。
Vue路由模式（history模式 刷新页面空白解决方案）
失眠时间的博客
05-11 4436
Vue 路由模式 Vue 三种路由模式详解 Vue history模式，部署后访问页面刷新空白情况，需配置路由指向
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
weixin_42644340的博客
08-12 9219
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析 前言 总所周知，Vue路由有两种模式，默认hash模式，这种模式下url上会带"#"，因此很多公司开发都不使用hash模式而选用另一种history模式，因为history模式下的url不会带上"#"。不带"#"既是history模式的优势，同时让它带来了一些烦人的问题，比如打包部署页面刷新为空白页，使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。 问题分析 以下是我学习/测试时写的二级路由 当我第
vue路由在多级页面下，页面刷新空白（history模式）
qq_35363709的博客
07-18 2774
vue路由在多级页面下，页面刷新空白（history模式）
vue路由history模式刷新页面一片空白，也不报错（解决方案）
Z.Dragon 的博客
11-07 9252
如果项目不在根目录下，路由需添加配置(base) router/index.js mode: 'history', base: '/h5/', config/index.js build assetsPublicPath: '/h5/', 后台配置代码：引用链接 END. ...
解决vue页面刷新或者后退参数丢失的问题
08-27
下面小编就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2打包后打开网站页面空白
BiangBaing的博客
08-17 1860
众所周知，Vue路由有两种模式，默认hash模式，这种模式下url上会带"#“，因此很多公司开发都不使用hash模式而选用另一种history模式，因为history模式下的url不会带上”#“。不带”#"既是history模式的优点，同时也让它带来了一些烦人的问题，比如打包部署页面刷新为空白页，使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。问题分析以下是我学习/测试时写的二级路由。...
vue的history模式刷新页面空白解决方案
Laputa_的博客
11-18 6533
前言 采坑记录，以便后面翻阅 首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案 问题现象 在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台也没有报错，当时就是懵逼状态！！ 仔细想一下，history模式下就是在操作html5的h...
vue3路由模式为history，打包后页面空白的处理方式
卫可冬的博客
04-06 6599
场景 vue-router 的 hash 模式时，url始终待着’#‘，如’http://localhost:8080/#/index.html’。 如果要去掉’#'号，那么就需要把 vue-router 的 hash 模式改为 history（html5）模式。 # vue3 const router = createRouter({ //hash 模式 // history: createWebHashHistory(), //html5 模式 history: createWeb
Vue（知识点总结）
前端往前冲
10-25 707
一些Vue知识点~ 希望帮到大家~ 作者会不定期更新内容的~ 希望大家都能不止于前端，共同建设更美好的IT业！
【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决
最新发布
记录
01-03 942
在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。
06. vue history模式刷新后页面白屏、401、404的问题
qq_29517595的博客
06-21 6203
vue项目history模式刷新后页面空白的问题
vue打包后项目，页面刷新之后一片空白
我的个人博客
11-07 3548
小白：记使用vue遇到的问题及解决办法 vue项目，打包之后页面能正常显示，但是刷新之后页面就一片空白什么都没有，也不报错。所有页面都能正常打开，都是刷新就一片空白。去网上搜索是因为router中的mode的模式问题，因为之前觉得url中的#好看起来不是很好，就想着去掉，没想到项目上线之后刷新页面出现了问题。 因为项目中的mode设置的是history，所以会出现这种情况，默认下是hash模式...
VUE二级以上路由刷新页面空白Uncaught SyntaxError: Unexpected token‘＜‘
z7568527的博客
10-17 1081
为了可以只打包一次 动态设置请求接口的ip 于是在public目录下创建了一个ip配置js文件。2.在vue.config.js中将publicPath设置为'/'功能实现了 结果在运行的时候遇到二级路由以上的页面一刷新就会白屏。1.在index.html中将文件引入路径用这种写法。版本:@vue/cli 5.0.8。再次重启项目 搞定。
vue页面刷新空白解决办法
09-19
如果Vue页面刷新后出现空白的情况，可能是因为Vue路由导致页面组件没有正确加载。解决这个问题的办法有以下几个方面： 1. 检查路由配置：查看Vue的路由配置文件，确保每个路由已正确定义并指定了对应的组件。确保路径和组件的映射关系正确。 2. 检查组件路径：如果使用了Vue的懒加载特性（使用`import()`动态加载组件），请确保组件的路径是正确的。检查文件路径是否拼写正确，是否位于正确的文件夹中。 3. 检查组件引入：确保在相关的Vue文件中正确引入了组件。可以检查`import`语句是否正确，组件是否有正确的命名，以及是否在`components`选项中注册了组件。 4. 检查数据加载：如果页面依赖于数据加载后才正常显示，可以检查数据请求是否成功。可以通过在Vue的生命周期钩子函数中打印数据来确认数据是否成功加载。 5. 检查错误提示：可以打开浏览器的开发者工具，在控制台查看是否有报错信息。如果有错误提示，可以根据报错信息来排查问题所在。 总之，针对Vue页面刷新后空白的问题，需要从路由配置、组件路径、组件引入、数据加载以及错误提示几个方面进行排查和调试，以找到并解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值