vue-cli打包以後的項目在nginx的部署

vue-cli執行

npm run build

進行打包，生成dist文件夾，把該文件夾下的文件直接複製到nginx服務器目錄下，就可打開項目，可是隻有首頁是能夠看到的，再刷新一下就404了，緣由是vue的項目爲單頁應用，路由找不到所致。因此要在nginx服務器配置對全部的路徑或者文件夾進行跳轉。重定向到首頁index下，這樣就都能找到路由了。

 location / {
       try_files $uri $uri/ @router;
       index index.html;
 }

location @router {
       rewrite ^.*$ /index.html last;
}

或者：

location / {
  try_files $uri $uri/ /index.html;
}

注意在配置文件中寫的時候，這個是在 sever{}中。

 

try_files指令

語法：try_files file ... uri 或 try_files file ... = code
默認值：無
做用域：server location

其做用是按順序檢查文件是否存在，返回第一個找到的文件或文件夾（結尾加斜線表示爲文件夾），若是全部的文件或文件夾都找不到，會進行一個內部重定向到最後一個參數。

須要注意的是，只有最後一個參數能夠引發一個內部重定向，以前的參數只設置內部URI的指向。最後一個參數是回退URI且必須存在，不然會出現內部500錯誤。命名的location也能夠使用在最後一個參數中。與rewrite指令不一樣，若是回退URI不是命名的location那麼$args不會自動保留，若是你想保留$args，則必須明確聲明。

location指令

語法：location [=|~|~*|^~|@] /uri/ { … }
默認值：無
做用域：server

location指令是用來爲匹配的URI進行配置，URI即語法中的"/uri/"，能夠是字符串或正則表達式。但若是要使用正則表達式，則必須指定前綴。 [@] 便是命名location，通常只用於內部重定向請求。

 

參考：https://www.zhihu.com/question/46630687

http://www.cnblogs.com/kevingrace/p/6126762.html

http://luokr.com/p/14