前言

最近部署一个vue项目，路由使用了history模式，发版过程中遇到了一些问题，虽然已解决，但还是决定记录如下，后续没事看看加强记忆。

前端配置

router.js文件里需要设置mode和base两个属性如下：

process.env.BASE_URL获取的就是vue.config.js里配置的publicPath

其次要设置vue.config.js里的publicPath，如下：

至此，前端的配置工作就结束了。

服务端配置(这里以nginx为例)

因为我部署的这台服务器有多个项目，所以用的是二级域名。

至此，也就实现了所有的history模式的配置。

最后附上hash和history模式实现原理如下

1、vue-router实现原理之hash模式

hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；

2、vue-router实现原理之history模式

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history’”

这种模式充分利用了html5 history中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。