完美解决vue在路由history模式下打包刷新报404（nginx）

history模式的配置方法

我们来看看官方文档是教我们怎么配置的：HTML5 History 模式。

首先要将mode设置为 history：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

nginx

location / {
  try_files $uri $uri/ /index.html;
}

 然后就没了...

这里我们需要清楚为什么会报404：

我们用nginx部署项目，然后在地址栏输入 http://dev.mds/（这里配置的端口是8080），你会发现地址栏之后会变为 http://dev.mds/home，并且 看起来一切正常， 似乎路由也可以正常切换而不会发生其他问题（实际上会发生问题，后面会进行讨论）。看起来好像不需要按官网告诉我们的那样配置后端也能实现 history模式，但如果你直接在地址栏输入 http://dev.mds/home，你会发现你获得了一个404页面。

那么 http://dev.mds/ 为什么可以（部分）正常显示呢？道理其实很简单，你访问 http://dev.mds/时，静态服务器（这里是nginx）会默认去目标目录（这里为 location中 root所指定的目录）下寻找 index.html（这是nginx在端口后没有额外路径时的默认行为），目标目录下有这个文件吗？有！然后静态服务器返回给你这个文件，配合 vue-router进行转发，自然可以（部分）正常显示。

但如果直接访问 http://dev.mds/home，静态服务器会去目标目录下寻找 home 文件，目标目录下有这个文件吗？没有！所以自然就404了。

配置后端

为了达到直接访问 http://dev.mds/home也可以成功的目的，我们需要对后端（这里即nginx）进行一些配置。

首先想想，要怎样才能达到这个目的呢？

在传统的hash模式中（ http://dev.mds/#/home），即使不需要配置，静态服务器始终会去寻找index.html并返回给我们，然后 vue-router 会获取#后面的字符作为参数，对前端页面进行变换。

类比一下，在 histroy模式中，我们所想要的情况就是：输入http://dev.mds/#/home，但最终返回的也是index.html，然后 vue-router 会获取home作为参数，对前端页面进行变换。那么在nginx中，谁能做到这件事呢？答案就是try_files。

首先看一下try_files的语法： try_files file ... uri;

然后看一下官方文档对它的介绍：

Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the fileparameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the uri specified in the last parameter is made. 

解释：

关键点1：按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理

关键点2：查找路径是按照给定的root或alias为根路径来查找的

关键点3：如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配

关键点4：如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码

举例说明：

location / {
    root html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html; 
}
大意就是它会按照 try_files后面的参数依次去匹配 root中对应的文件或文件夹。
如果匹配到的是一个文件，那么将返回这个文件；如果匹配到的是一个文件夹，
那么将返回这个文件夹中 index指令指定的文件。
最后一个 uri参数将作为前面没有匹配到的fallback。（注意 try_files指令至少需要两个参数）

其他注意事项：

try-files 如果不写上 $uri/，当直接访问一个目录路径时，并不会去匹配目录下的索引页  即 访问location/images/ 不会去访问  location/images/index.html

举个我自己网站的例子：

location / {
  root html;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}

假设网站地址是http://history.test

这里我们直接访问的话，浏览器会去寻找http://history.test所在服务器的根目录下面的index.html，这样是能够加载inde.html的。

而当我们访问http://history.test/home时，首先回去查找有无home文件，如果没有，再去查找有误home目录，如果也没有最终就会定位到第三个参数从而返回index.html，按照这个规则，所有路由里的url路径最后都会定位到index.html。

而$uri这个参数的作用其实是匹配那些.js文件用的，而$uri/在这个例子中并没有多大用，实际上是可以去掉的。

history模式下可能会遇到的问题及解决方案

在将我的项目（在路由中用了懒加载）改为 history模式的过程中，有时候发现会出现chunk加载出错的情况，打开chrome的network发现那个chunk加载404了，是因为请求的url中多了一层路径。我在这里发现了解决方案。

在 history 模式中切换路由时，我们是真正改变了页面的 url 路径，所以webpack的runtime会认为它位于 example.com/some/path。如果 publicPath是设置的相对路径，那么webpack加载chunk时可能会变成 example.com/some/path/static/js/3.js这样的路径，然而chunk的真正路径是 example.com/static/js/3.js，所以我们需要将 publicPath设置为绝对路径（ publicPath: '/'）来解决这个问题。