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

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/2/14 1:00:49 共计：3621 浏览

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;

}

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。