Vue改用history模式后Nginx代理报404

由于以前VUE采用hash模式:

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）
比如：http://abc.example.com/abc/#/hello，hash 的值为 #/hello

 

现采用history模式:

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

比如：http://abc.example.com/abc/hello，路由hello

 

但在用nginx代理时，刷新路由时报404错误，经过网上资料和实测，通过在location中添加核心代码来解决：

try_files $uri $uri/ /index.html; # vue history

但该代码仅适用于"location /"根的情况，如果是“location /abc”子项目方式，则需要调整代码：

try_files $uri $uri/ /abc/index.html; # vue history

 

附Nginx完整配置：

server {
    	listen       3010;
    	server_name  abc.example.com;

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

    	location /abc {
        	alias   /usr/local/nginx/html/abc-frontend/;

        	index  index.html index.htm;
		    error_page 404 /index.html;

		    try_files $uri $uri/ /abc/index.html; # vue history
   	    }
	

        #接口服务
   	    location /abc/api {
        	proxy_pass http://192.168.0.110:9010/api/;

        	proxy_http_version 1.1;

        	proxy_set_header Host $host:$server_port;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  	    }
  
}