小白:记使用vue遇到的问题及解决办法
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#后端配置例子
hash模式支持前进,后退,跳转,刷新操作
history模式只支持前进,后退,跳转操作
hash的工作原理是使用hashchange事件,在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。
history模式把window.history对象打印出来可以看到里边提供的方法和记录长度
这篇文章有详细解释hash原理和history原理:https://blog.csdn.net/wang1006008051/article/details/81805932