在前端開發的日常工作中,我們的每個項目大致上都會有不同的運行環境,本地環境(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中你所設置的新命令來進行。