vue项目部署至nginx，路由404（刷新404）

问题描述

vue项目部署至nginx后，我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果刷新就会404。

原因分析：

因为前端代码在本地调试时是正常的，故考虑是nginx的配置问题。

server {
        listen 8081;
        location / {
            root /Users/xxx/Documents/project/vue/dist;
            index index.html;
        }
    }

解决方案：

查阅Vue Router官网中Nginx的配置教程。发现nginx的配置中缺少了这个配置。

解决方案二：

因为我这边是部署在网站的二级目录，而且是用另外一个二级域名指定到网站的二级目录，我是放在伪静态配置中解决。

#解决用Nginx部署vue项目后刷新出现404的问题
location /h5 {
  try_files $uri $uri/ /h5/?$query_string;
  expires 7d;
}

举例说明：

root 后面的参数是前端vue项目代码安装目录；
try_files 负责扫描内部目录然后再进行内部重定向；
expires 是nginx控制缓存的一种方式，7d=7天。

location  /  {
           root   /home/nx/dist;
           try_files $uri $uri/ /index.php?$query_string
           expires 7d;
        }

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example，try_files 会到硬盘里尝试找这个文件；
如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户；
显然，目录中没有叫 example 的文件；
然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录；
又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。