Nginx-Vue路由History模式刷新404问题

使用 vue-router 的 history 模式的Vue项目打包部署到nginxweb服务器后页面刷新404问题。

问题原因：

我们的nginx服务器是根据页面路由，去按路径寻找资源的。我们使用Vue框架编写打包后是只有一个html页面的，不存在其他资源目录下的html，nginxweb服务器根据路径找不到对应页面所以就报404。

问题复现

1. 首先创建一个Vue项目，vue-router的模式使用history模式，然后对其进行打包

2. 将打包好的dist文件目录复制到nginx目录下

3. 修改nginx.conf:

   location / {
       root dist;
       index index.html index.htm;
   }
   

4. 重载nginx.conf:

   nginx -t // 检查nginx.conf是否有错
   
   nginx -s reload
   

5. 打开浏览器输入localhost，然后刷新页面：

   可以看到当我们一刷新，页面就报404错误。

解决方案

添加try_files指令，try_files指令是Nginx中用于寻找请求中匹配的文件的指令。

第一个参数是要查找的文件或目录，第二个参数是在第一个参数无法找到所确定的文件或目录时要重定向到的URL。

try_files语法：

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

上述代码块表示：第一个参数：找到与当前请求中URI匹配的文件。第二个参数：如果该文件不存在，则Nginx将尝试找到一个目录。第三个参数：如果目录也不存在，则重定向到index.html。

添加如下配置：

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

然后重载nginx.conf。

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

效果：

变量	说明
$uri	当前请求的 URI，但不含“？”后的参数
$args	当前请求的参数，即“？”后的宇符串
$arg_xxx	当前请求里的某个参数，“arg ”后是参数的名字
$http_xxx	当前请求里的 xxx 头部对应的值
$sent_http_xxx	返回给客户端的响应头部对应的值
$remote_addr	客户端IP 地址
$http_cookie	获取cookie值
$cookie_xxx	当前请求的cookie xxx对应的值
$request_uri	浏览器发起的不作任何修改的请求的url中的path 如在www.baidu.com/p1/file?d=111, 其值为/p1/file?d=111
$request_method	请求方法