官方介绍：
https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

在 nginx 加入以下配置即可解决：

1
2
3
location / {
  try_files $uri $uri/ /index.html;
}

try_files指令介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
语法：try_files file ... uri（格式1） 或 try_files file ... = code（格式2）

默认值：无

作用域：server location

解释说明：

按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理；
查找路径是按照给定的root或alias为根路径来查找的；
如果给出的file都没有匹配到，则会进行一个内部重定向到最后一个参数给定的uri，就是新的location匹配；
只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向；
最后一个参数是回退URI且必须存在，否则会出现内部500错误；
如果是（格式2），若最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码。

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

1
2
3
4
5
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。