Vue 发布服务器(Nginx)后访问路由报错 404

server {
    # 监听端口
    listen 8089;
    # 主机名称
    server_name www.dzm.com;
    # 根目录
    root /usr/local/var/dzm;
    # 匹配协议
    # location / {
    #     index index.html;
    # }
    # 上面 / 的匹配协议换成这个
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
        proxy_pass http://api-test/;
    }
}

// 将这个匹配换成下面的
location / {
    index index.html;
}
// 将上面的匹配换成这个
location / {
    try_files $uri $uri/ /index.html;
}

• 在 nginx 中 try_files 的的作用一般用户 url 的美化，或者是伪静态功能:

• 当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。

• try_files 会到硬盘里尝试找这个文件。如果存在名为 /root/example（其中 root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。

• 显然，目录中没有叫 example 的文件。然后就看 uri/，增加了一个 /，也就是看有没有名为 /root/example/ 的目录。

• 又找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.html