Nginx: Vue路由history模式下，publicPath配置为子目录时，页面刷新报404错误

今天在部署项目时遇到的问题，在网上都找不到解决方法（或许自己没找对），所以自己捣鼓了下，测试加分析定位bug，最后总算解决了，所以要记录一下。

1. 问题描述

vue项目打包后部署到Nginx，Nginx作为静态服务器

项目路由启用HTML5的history模式

项目路径：html/some/path（Nginx的HTML目录）

publicPath：配置为 /some/path/ （vue.config.js中的publicPath）

ngixn配置：

location ^~ /some/path/ {
    root    html/;
    try_files   $uri $uri/ /index.html;
}

访问: http://www.demo.com/some/path

结果：能成功访问，点击页面跳转也是正常的，似乎网站部署成功了

情形1：若刷新（点击浏览器刷新按钮）http://www.demo.com/some/path，这时也可以正常显示，这时没有问题的

情形2：当页面跳转到其他页面或者说其他路径，如：

http://www.demo.com/some/path/otherpage

这时点击刷新按钮，页面不存在了，Nginx返回404错误

或者直接输入：http://www.demo.com/some/path/otherpage，点回车也是这种情况

2. 问题分析

情形1分析：成功原因是因为Nginx匹配到目录/some/path下的index.html文件

主要分析失败原因

情形2分析：失败原因是因为Nginx在html/some/path/otherpage没有找到相应文件或文件夹，便会在html中找index.html文件，这时也没有找到index.html文件，就报404错误。这里就要知道try_files配置的作用了，原因也在这里。

问：为什么在html/some/path/otherpage没有找到相应文件或文件夹就会在html静态根目录找呢？

首先，先了解一下try_files指令：

try_files指令
语法：try_files file ... uri 或 try_files file ... = code
默认值：无
作用域：server location
其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件
或文件夹都找不到，会进行一个内部重定向到最后一个参数。
需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。最后一个参数是
回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。与rewrite指
令不同，如果回退URI不是命名的location那么$args不会自动保留，如果你想保留$args，则必须明确声明。
摘自网上：https://www.hi-linux.com/posts/53878.html

看到这应该就能明白为什么会在html静态根目录找，原因就是最后一个参数：/index.html

3. 解决方法

回到我们的需求来，当在html/some/path/otherpage没有找到相应文件或文件夹时，我们希望他应该在html/some/path里找index.html文件。

所以解决方法也很简单，就是在try_files中将/index.html修改为/some/path/index.html

终于搞明白了，嘎嘎，记录下。。。