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