坑一

代理后端接口时 少写一个/

第一种

错误的：

location /prod-api {}

正确的：

location /prod-api/ {}

第二种

错误的：

proxy_pass http://127.0.0.1:8080;

正确的：

proxy_pass http://127.0.0.1:8080/;

示例

location /stage-api/ {
	proxy_pass http://127.0.0.1:8080/;
}

坑二

错误页面不会跳转到登录页

错误写法：

error_page  404 403 500 502 503 504  /50x.html;
location = /50x.html {
	root   html;
}

这样只会跳转到nginx的默认的500页面，需要/50x.html换成项目中的登录页或首页，并且root指向对应的目录。

正确写法：

error_page  404 403 500 502 503 504  /index.html;
location = /index.html {
	root dist;
}

dist是存放index.html的父文件夹，此处dist是在nginx目录下的。

前后分离项目nginx.conf示例

worker_processes  1;

error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;

pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
	
    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
		
		location / {
            root   dist;
            index  index.html index.htm;
        }
		
		location /stage-api/ {
            proxy_pass http://127.0.0.1:8080/;
        }
       
        error_page  404 403 500 502 503 504  /index.html;
		location = /index.html {
			root dist;
		}
        
    }
	
}