Vue3项目Build后部署在Nginx上F5刷新页面空白或404

环境

综述

解决思路

服务端nginx的一开始配置如下（假设域名为：www.vvhan.com）：
server
{
    listen 80;
    server_name www.vvhan.com;
    index index.html;
    root /www/wwwroot/dist;
}

如上出现404的原因是由于在这个域名根目录/www/wwwroot/dist下面压根就没有'XXX/xxx/xxx'这个真实目录存在。

解决问题

在服务端nginx配置里添加vue-route的跳转设置，正确配置如下：
server
{
    listen 80;
    server_name www.vvhan.com;
    index index.html;
    root /www/wwwroot/dist;

    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}