关于vue私用history模式打包到服务器出现白屏的原因以及解决办法

路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，在本地没问题但打包到服务器就出现白屏时。此时你可以选择使用默认的模式，把mode:history删除。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源即必须要服务端在服务器上有对应的模式才能使history，如果服务器上没有配置（服务器的配置值nginx），然后你还要看你打包上去的位置是是否是服务器的根目录，例如一个www.xxx.com指定的服务地址是183.235.15.4/project，然后你的项目在打包到project/demo下，也就是访问你的项目的地址是：183.235.15.4/project/demo,那么这个时候你需要在router中配置base：/demo/,如下所示

const router = new VueRouter({
  mode: 'history',
  base: '/demo',
  routes: routers
});

 

vue路由有两种模式，一种是hash,另外一种是history，默认是hash。首先得了解一下这两种模式的区别以及实现

1、hash模式： url会携带#，#及以后的字符成为hash或者前端路由，可以通过window.location.hash得到。

      1. 1、hash 虽然出现在 url 中，但不会被包括在 http 请求中，它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面。

      1.2.、每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

 

2、history模式：history模式的url没有携带#，显得美观一些，History 模式是 HTML5 新推出的功能，主要使用 history.pushState 和 history.replaceState 改变 URL。通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。

History interface是浏览器历史记录栈提供的接口，通过back(),forward(),go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
从HTML5开始，History interface提供了2个新的方法：pushState(),replaceState()使得我们可以对浏览器历史记录栈进行修改：

window.history.pushState(stateObject,title,url)
window.history,replaceState(stateObject,title,url)

两种模式对比：

1.Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
2.History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
3.Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候，

注意： 在history模式下，由于页面的路径是xxx.com/router，若服务器没有做nginx这样的转发，默认找的是xxx.com/router下的index.html,由于vue项目是单页面应用，打包后只有一个html,路径在当前项目的主目录下，在其他目录的找不到的，因此需要服务器强制转发到主目录下的index,vue项目再根据路由进行显示那一块