Vue Router history 模式 Nginx 配置目录文件刷新不自动添加斜杆

使用 Vue 打包的项目一般是单页应用（SPA），路由通过 Vue Router 进行管理，如果使用的是 history 模式，在打包部署后，网页一刷新，可能就会 404 了。

下面是 Vue Router 官方给的解决方法：

location / {
  try_files $uri $uri/ /index.html;
}
nginx
复制代码

我的博客网站也是 Vue 打包的，使用 puppeteer 爬取网页生成静态文件以优化 SEO ，所以项目目录下还会有其他静态页面的文件夹。

设置后如果项目目录下有其他文件夹需要访问，url 总是自动加上斜杆后缀，不是很雅观：

原因是访问无斜杆后缀的地址时，返回的是 301 重定向，告诉浏览器跳转至带斜杆的地址。

（个人想法：如果搜索引擎来爬取无斜杆的地址，发现是 301 可能就停止爬取了，这样不利于 SEO ，当然，可能搜索引擎会自动跳转至 301 指向的地址也说不定）

在第二个 $uri/ 前面加上 $uri/index.html 就可以解决这个问题，配置如下：

（因为这里的默认索引文件都是 index.html ，这样配，就是先找有没有 index.html 文件，再去找默认文件）

location / {
  try_files $uri $uri/index.html $uri/ /index.html;
}
nginx
复制代码

配置后的地址不再是 301 重定向，而是 200 了：