Vue Router开启history模式

众所周知，向我这样务实的人，自然不会因为好看而去使用history模式，毕竟不同的服务器要做不同的配置，懂的自然懂，我也不觉得hash 丑

然而，hash是用来指导浏览器动作的，对服务器端完全无用，在做登录鉴权中，就不得不使用history

第一步

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/coupon/fetch",
      component: CouponFetch,
      meta: {
        title: "领取优惠劵"
      }
    }
  ]
});

mode: "history",想当年我使用Vue Cli时，到这就完事了...
.

第二步

然而，运气不好的我们可能会遇到找不到index.html的错误，因为本地的webpack-dev-server也要配置，不存在的资源统一返回index.html

 devServer: {
    historyApiFallback: true
  }

第三步

然而，运气不好的我们可能会遇到

当path 是coupon 时就不会有这个问题，我一度以为是上面两个步骤哪里出错了，直接用/coupon-fetch得了，然而，平静下来后越想越气。

突然发现页面加载index.js的方式是这样的

模板index.html 中加上了

<script src="/index.js"></script>

因为生产环境会引用云上面的文件，所以尽管本地会报错，但生产环境不会，我想要不就这么算了，然而平静下来越想越气，想起了我之前用过Vue Cli，于是仔细对比下配置

加上 publicPath:"/" 就·可以了。

结语

其实可以看到这个问题确实有很多变相解决的方式，在状态不好时，是完全可以放一放的，有时候越是想解决，越是会陷入逻辑的死循环，反正我是这样

为什么我觉得是运气不好的，因为这个项目的结构和Vue Cli生成的几乎一摸一样，但是却像是特意把webpack-dev-server的配置删除一样，刚开始拿到后，发现不支持热更新，报错还退出，然后在package.json加上一条命令就好了...

不过这种机会也是可遇不可求，磕磕绊绊中学到了很多，清晰了不少。

不知道有赞那边是出于什么样考虑，很多项目给到的架子都是这样，突然想到有赞开发者工具不支持热更新可能也是这种方式导致的。