vue打包后项目，页面刷新之后一片空白

小白：记使用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