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

1050一步一个坑kohai

使用 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 了: