解決vuejs應用在nginx非根目錄下部署時訪問404的問題

以往部署vuejs應用都是直接在nginx的location為/下直接部署，這次遇到要將vue應用部署在/vuejs-admin的非根下，使用以往部署方案直接訪問就會404，這時修改步驟如下：

1、修改項目router配置，如下：

這里一是要修改router模式為history，另一個就是修改base地址為要訪問的/vuejs-admin的地址，注意前后都有斜線

2、修改build下靜態資源路徑前綴

同上一部，這里要修改assetsPublicPath為/vuejs-admin/地址

3、執行vuejs打包：npm run build

確保打包后所有靜態資源均是相對地址/vuejs-admin開頭，比如：

4、修改nginx配置，使用rewrite配置

server {
    		listen       80;
    		server_name  xxxx.com;

    		#charset koi8-r;

    		#access_log  logs/host.access.log  main;
		location /vuejs-admin-server {
        			proxy_pass http://127.0.0.1:8080/vuejs-admin-server;
    		}
    		location ^~/vuejs-admin {
			alias /home/server/webapps/vuejs-admin/;
   			#index index.html;
			try_files $uri $uri/ @rewrites; 
		}    		
		 location @rewrites {
		                rewrite ^/(vuejs-admin)/(.+)$ /$1/index.html last;
        		}
    		error_page   500 502 503 504  /50x.html;
    		location = /50x.html {
        			root   html;
    		}
    	}

5、熱重載nginx，搞定收工：nginx -s reload