路由在‘history‘模式下出现空白页面

最新推荐文章于 2023-05-11 16:05:17 发布
最新推荐文章于 2023-05-11 16:05:17 发布
阅读量862 收藏 2
点赞数
分类专栏： vue 文章标签： php html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Serena_tz/article/details/120360387
版权

在使用指令 npm run build打包以后，我在本地点开dist文件夹下的index.html，浏览器提示我找不到文件。
在这里插入图片描述
经过仔细排查以后发现，原来是因为我的路由使用了'history'模式，也就是mode: 'history', 当时将hash模式改为'history'模式，是因为地址栏老是出现#，感觉很不美观，后来还是直接换成了hash模式，比较方便。
然后，我在网上看了一下'history'模式下处理的方法，感觉有点麻烦。
参考：http://www.qzroc.com/index.php/archives/78/。

Serena_tz
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
路由history 刷新页面就空白_【前端路由】这可能是最容易理解的一篇了
weixin_39556702的博客
12-05 1214
随着 ajax 的流行，异步数据请求体验极具提升，用户得以在不刷新浏览器的情况下进行页面交互，而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互时无刷新，连页面跳转都是无刷新的，为了实现单页应用，就有了前端路由。常用的两种模式类似于服务端路由解析对应的 url 路径，返回对应的页面/资源的方式，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然...
详解Vue路由History mode模式中页面无法渲染的原因及解决
11-30
Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。 一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。如果因为业务需要，或者单纯是觉得带#号不美观，那么可以使用history模式，简单而言就是在router的配置文
VUE 解决mode为history页面为空白的问题
12-13
当router.js 中mode:history 发现刷新页面 不显示了，原因出来history的请求路径资源不存在了，这个需要后端配置的， 前端 需要修改一个地方即可, devServer: { port: 8000, host: '0.0.0.0', overlay: { errors: true }, hot: true, historyApiFallback: { index: '/index.html' } }, 新增historyApiFallback
Vue 在 history 模式下，部署到服务器出现空白页情况
普罗旺斯
02-05 759
项目场景： vue 搭建的项目，路由一直用的hash模式，所以 url 中都会带有一个“#”号。现在想要去掉 “#”，于是使用 history 模式 { mode: ‘history’ }，代码如下： import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router =
VUE - history模式打包后在服务器上页面空白的问题
weixin_44880056的博客
03-15 286
history模式打包后在服务器上页面空白的问题 解决方法 ----- 在base添加 /服务端文件名/
vue的history模式刷新页面空白解决方案
Laputa_的博客
11-18 6572
前言 采坑记录，以便后面翻阅 首先你需要确认页面空白不是由资源文件路径不正确引起的，如果资源找不到就将绝对路径改为相对路劲，具体解决方案看这里：webpack–资源和css中图片引用打包为相对路径的方案 问题现象 在本地开发环境没有任何问题，路由也正常显示，但是打包并部到服务器之后，访问页面就是空白，看控制台也没有报错，当时就是懵逼状态！！ 仔细想一下，history模式下就是在操作html5的h...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
Vue路由history模式解决404问题的几种方法
12-10
但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
本地vue-router模式设置为mode:‘history‘时，页面空白，无法加载
newBunny的博客
11-30 1951
router 配置模式的地方，加一行代码 base: process.env.BASE_URL const createRouter = () => { return new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [] }) } 酱婶er，即可
Vue在history模式下页面空白及404解决
qq_39762109的博客
04-02 2045
vue路由有两种模式一种hash（vue-router默认模式）另一种history路由 改变为history模式： export default new Router({ mode: 'history' }） 由于改变了vue路由模式为history，导致页面空白返回404 假如有这样一个测试的访问地址：127.0.0.1/h5/home 可以访问到项目下的home页面 官方解释histor...
Vue路由模式（history模式 刷新页面空白解决方案）
失眠时间的博客
05-11 4975
Vue 路由模式 Vue 三种路由模式详解 Vue history模式，部署后访问页面刷新空白情况，需配置路由指向
Vue 刷新局部页面（不闪烁）
weixin_45414972的博客
11-06 2283
首先在App.vue组件写入 <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', p...
vue路由history模式刷新页面一片空白，也不报错（解决方案）
Z.Dragon 的博客
11-07 9429
如果项目不在根目录下，路由需添加配置(base) router/index.js mode: 'history', base: '/h5/', config/index.js build assetsPublicPath: '/h5/', 后台配置代码：引用链接 END. ...
vue项目路由模式为history时打包后部署在nginx服务器后，刷新页面空白的问题
u011295864的博客
07-16 4761
放在nginx服务器根目录下的情况： vue.config.js配置： publicPath: '/' router配置： base: '/', mode: 'history' nginx配置文件： location / { try_files $uri $uri/ /index.html; root html; index index.html index.htm; } 放在nginx服务器根目录下一个子目录下的情况（以子目录名称是demo为例）： vue.
xss过滤器无法处理ajax请求_2. 萌新向 | XSS之隐秘的角落
weixin_39597318的博客
11-21 205
XSS漏洞主要是对表单发起攻击，很多时候，表单会以输入框的形式出现，但也有些表单不会以输入框的形式出现，甚至不会让我们看见，而是藏在某个不起眼的小地方，这就是所谓的“隐秘的角落”。本文将继续从实战中讲解XSS，仍然使用前文所用的XSS Challenge平台——为你揭秘如何处理那些“隐秘的角落”。当然，除此之外，我们也会带来一些新的东西，比如——BurpSuite。上一篇文章的末尾已经使用过了Bu...
异步路由/动态路由配置后，页面刷新出现空白页或404的解决办法
m0_65051174的博客
03-16 3802
按照 登录-》路由调转 进行时，我们在登录时会调用接口，获取动态路由信息，此时是有路由信息的，可以正常跳转。但是，当我们刷新时，会删除动态路由信息，关于addRoute，官网中有这样一句话：‘请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。在配置路由守卫时，获取路由信息并添加路由（addRoute）后，使用 router.push() 或 router.replace() 重新加载路由。
vue3 (三) qiankun+子应用（主应用）
飞天代码的博客
08-24 2801
qiankun+vue3.0
vue路由history模式刷新页面时页面丢失
最新发布
06-09
当使用 Vue 路由的 history 模式时，刷新页面会导致页面丢失的原因是因为在 history 模式下，Vue 路由是使用 HTML5 History API 来实现的，而刷新页面会向服务器发送请求，在服务器端找不到对应的路由，就会返回 404...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值