VueJs生產環境部署

王磊的部落格發表於2017-05-26

  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

 

相關文章