VueJs生產環境部署

標籤：項目   nodejs   運行   UI   技術   uil   style   名稱   target   

　　VueJs為用戶端語言，所以部署的時候是不需要基於nodejs或其他伺服器運行環境，只需要像其他靜態網站的方式發布就可以了，下面介紹一下VueJs具體發布的流程還有需要注意的點。

　　先來看VueJs最終產生的檔案目錄：

　　　　 

 

具體的步驟如下：

 

1.vue項目根目錄/config/index.js更改資源產生路徑：

 

　　assetsPublicPath:"/項目名/"改為assetsPublicPath:"/"

 

　　解決問題：index.html資源訪問不到，資源多一級項目名稱的路徑。

 

2.使用 npm run build 命令產生網站，網站為根目錄下的dist檔案；

 

3.解決網站重新整理時404的問題；

 

　　到這個步驟的時候網站已經能正常訪問了，到時不能F5重新整理，重新整理的時候回報404，仔細觀察命令會發現，路徑已經變成咱們vue路由裡面設定的“虛路徑”了，所以肯定會404，這個時候需要在運行伺服器上進行設定，把訪問不到的路徑都指向index.html,這個時候網站就支出重新整理了，比如我如果是使用nginx做代理，配置：

 

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

　　

更多的伺服器配置點擊：https://github.com/vuejs/vue-router/blob/dev/docs/zh-cn/essentials/history-mode.md

 

VueJs生產環境部署