nginx部署vue-cli專案

vue-cli專案npm run buil後的nginx部署。執行npm run build後，找到dist目錄

方法一

直接部署在根目錄下，遺憾的是不能自由命名location後的訪問路徑

	location / {
		root   F:/pre-download-static/dist;
		index index.html;
	}
複製程式碼

方法二

指定root，rewrite到index.html，可自由命名location後的訪問路徑

server {
    listen       8089;
    server_name  localhost;
	root E:/git/pre-download-static/dist;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
	# rewrite index
	location /abc {
		try_files $uri $uri/ @router;
		#需要指向下面的@router否則會出現vue的路由在nginx中重新整理出現404
		index index.html;
	}
    #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的檔案
    #因此需要rewrite到index.html中，然後交給路由在處理請求資源
	location @router {
		rewrite ^.*$ /index.html last;
	}
}
複製程式碼

方法三

可自由命名location後的訪問路徑

1. 修改config/index.js配置檔案, assetsPublicPath的值

       build: {
           // Template for index.html
           index: path.resolve(__dirname, '../dist/index.html'),
       
           // Paths
           assetsRoot: path.resolve(__dirname, '../dist'),
           assetsSubDirectory: 'static',
           assetsPublicPath: '/record-static/',
   複製程式碼

2. ngnix配置

   location /record-static {
       alias E:/git/pre-download-static/dist;
       try_files $uri $uri/ record-static/index.html;
   }
   複製程式碼

ps: 不足之處望指出，有更好的建議請分享