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

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

韩小韩
2023-08-11 / 2 评论 / 7,994 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年08月11日,已超过310天没有更新,若内容或图片失效,请留言反馈。

环境

综述

解决思路

服务端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;
    }
}

0

评论 (2)

取消
  1. 头像
    ee
    Windows 10 Windows 10 / Google Chrome Google Chrome 中国江西省宜春市电信

    并不是,有些是文件目录权限问题

    回复
    1. 头像
      韩小韩 作者
      Windows 10 Windows 10 / Google Chrome Google Chrome 中国江苏省徐州市邳州市电信
      @ ee

      哥们,页面正常访问,刷新404,意思我F5后,这文件权限就变了?什么权限?

      回复