真对vue打包上线后 ,一刷新页面就空的情况 - 前端笔记-在项目打包后放在服务器 一刷新就 空的 原因是 路由模式 不能设置为 history constrouter&nbs...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>真对vue打包上线后 ,一刷新页面就空的情况 - 前端笔记
在项目打包后放在服务器 一刷新就 空的  原因是   路由模式 不能设置为     history   

const router = new VueRouter({
  mode'history',
  baseprocess.env.BASE_URL,
  routes
})

vue项目,打包之后页面能正常显示,但是刷新之后页面就一片空白什么都没有,也不报错。所有页面都能正常打开,都是刷新就一片空白。去网上搜索是因为router中的mode的模式问题,因为之前觉得url中的#好看起来不是很好,就想着去掉,没想到项目上线之后刷新页面出现了问题。

因为项目中的mode设置的是history,所以会出现这种情况,默认下是hash模式。

修改前:

mode: 'history'

因为默认就是hash模式,直接将这个注释掉或者删除掉,再重新打包项目既可。

官网上给出的解释是,使用hash模式,是使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

然而使用history模式的时候,是需要配合后台一起操作的。引用官网原文---history模式需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你app依赖的页面。链接---https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

hash模式支持前进,后退,跳转,刷新操作

history模式只支持前进,后退,跳转操作

 

hash的工作原理是使用hashchange事件,在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

history模式把window.history对象打印出来可以看到里边提供的方法和记录长度


转载 csdn

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » 真对vue打包上线后 ,一刷新页面就空的情况

网友评论(0)