隐藏

使用nginx部署Vue项目,刷新出现404

发布:2022/9/28 16:35:10作者:管理员 来源:本站 浏览次数:868

1. 问题描述


   按照 若依框架前后端项目分离部署(jar包+Nginx部署)这篇博客的教程将若依项目部署到服务器上,可以访问,但是一刷新就会出现404


2. 解决


   修改配置文件


worker_processes  1;


events {

   worker_connections  1024;

}


http {

   include       mime.types;

   default_type  application/octet-stream;

   sendfile        on;

   keepalive_timeout  65;


   server {

       listen       80;   # 浏览器上访问的接口

       server_name  localhost;


   #root   html/dist; 尽量不要把dist文件夹放在nginx中

   

   root   c:/html/dist; # 将dist放在c盘html目录下


       location / {

          #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404

  try_files $uri $uri/ @router;

  index  index.html index.htm;

       }


       location /prod-api/{

        proxy_set_header Host $http_host;

  proxy_set_header X-Real-IP $remote_addr;

  proxy_set_header REMOTE-HOST $remote_addr;

  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  proxy_pass http://localhost:8080/;  # 后端接口

    }


       #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件

       #因此需要rewrite到index.html中,然后交给路由在处理请求资源

       location @router {

          rewrite ^.*$ /index.html last;

       }


       error_page   500 502 503 504  /50x.html;

       location = /50x.html {

           root   html;

       }

   }

}