栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

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

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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;
        }
    }
}
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/941360.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号