Vue+webpack項目多環境打包相關配置


  在前端開發的日常工作中,我們的每個項目大致上都會有不同的運行環境,本地環境(dev)、測試環境(qa)以及線上環境(production),但是在Vue-cli建項下,一般只會幫我們建立本地環境以及線上環境的相關配置,所以我們需要自己添加自己所需要的環境。

  下面我們就以qa環境為例子,走一遍配置的流程:

1.使用Vue-cli建項完成后,在package.json文件中的scripts部分中添加一個屬性:

"buildqa": "node build/buildqa.js"

 

 

 

 

2.將build文件夾中的build.js復制一份重命名為buildqa.js,並修改其中的參數

 

 

 

 

3.在build文件夾下復制webpack.prod.conf.js,然后將其重命名為webpack.qa.conf.js,同時修改其中的參數設置

 

 4.修改webpack.prod.conf.js文件中的參數設置

 

 5.修改vue-loader.conf.js中的參數設置

 

 

 

 6.在config文件夾下復制一份prod.env.js,重命名為qa.env.js,並修改其中的參數

 

 7.接下來就可以在代碼中根據process.env.NODE_ENV屬性的值來判斷所處的環境了。

當然,打包命令要根據package.json中你所設置的新命令來進行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM