使用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.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

目前成都创新互联公司已为上1000+的企业提供了网站建设、域名、网络空间、绵阳服务器托管、企业网站设计、铜川网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
文章题目：使用nginx部署Vue项目，刷新出现404-创新互联
文章地址：http://cdxtjz.cn/article/csscds.html