首先说明一下为什么要切换到 history模式，不是因为我嫌弃hash模式的那个#号丑，毕竟在我这里能跑起来的代码就是好代码。但是当我用到微信jssdk的时候，他需要一个redirect_uri，这个是认证成功之后回调的页面，state是你可以拼接的参数，但是呢，认证成功之后发现这个state我取不到。
因为我使用state的参数当key存到storage里面一些数据，但是跳转之后没有获取到数据，我一开始车还开错方向了，我还以为是微信把storage给屏蔽了呢，其实在浏览器中是可以看到storage的。总之走了好多弯路，发现url有问题

http://xxx.com/?code=xxx&state=111#/xxx/xxx

发现没坑爹的把code和state拼到了域名和#好之间，难怪取不到。所以我就把router改成history模式。改动如下

export default new Router({
  mode: 'history',
  base: hostUtils.getRouterBase(),

上面这个base是域名后面的目录，这里我们遇到个问题，由于我第一个vue项目不同环境下都是'/xxx',所以就没考虑这个base会因为不同环境有不同目录的问题，等到这个项目的时候就变了，就坏了，来来回回配置了好几遍。
把犯得蠢事也记录一下吧，第一次写成了

export default new Router({
  mode: 'history',
  base: hostUtils.getRouterBase,

看出区别没，没有括号()，这样取到的就不是这个方法的return，而是取到的是这个方法的js代码，也算新手会犯的一个愚蠢的错误吧，鸟悄的说一下，这个问题卡了我好长时间。

还有就是 RouterBase方法里面

const getRouterBase = function () {
  if (location.hostname == 'localhost' || isIP || location.hostname == constant.debugHost) {
    return constant.debugRouterBase;
  } else if (location.hostname == constant.preHost) {
    return constant.preRouterBase;
  } else {
    return constant.releaseRouterBase;
  }
}

因为location.hostname是域名不带目录的，但是我比较的是constant里面的是带目录的，就走不进相应的if里面。这种低级错误，比较愚蠢，但还不太容易发现，再次注意一下

还有一个比较高级的问题就是histroy模式的情况下，build之后服务器获取dist文件夹，显示的页面是白白的一片。
这要求运维同学，配置一下就好了

欢迎打赏