vue-cli2:區分開發、測試、生產環境

本文適合使用vue-cli2搭建的項目,vue-cli3取消了build和config文件夾,不適用此方法。

用vue-cli2構建完項目後,只有一個開發環境dev和生產環境prod,現在我們要加一個測試環境 test

1、首先在package.json增加一個test啓動項,可以使用npm run test打包測試代碼

複製build代碼,做如下更改

2、接下來要建一個build_test.js,在build文件夾複製一份build.js更名爲build_test.js,做如下修改

3.上方代碼需要引入webpack.test.conf,那麼在build文件夾下複製一份webpack.prod.conf.js更名爲webpack.test.conf.js,修改如下

把所有的config.build替換爲config.test,在此文件裏全部替換即可,webstom快捷鍵ctrl+r

4、接上面,config.build改爲了confog.test,那麼需要建一個test文件。在config文件夾中複製dev.env.js(注意是dev),改名爲test.env.js

可以在這個地方,定義開發、測試、生產環境不同的代碼,比如ajax的baseUrl

從上往下依次是開發—>生產—>測試

值得注意的是,如果在這裏面修改了配置項,本地開發的時候需要重新運行npm run dev

5、最後需要修改一下webpack.base.conf.js裏面的assetsPublicPath,防止test打包的時候路徑錯誤

把原來的assetsPublicPath路徑進行修改

至此,開發、測試、生產環境的區分就全部完成了

開發:npm run dev

測試:npm run test

生產:npm run build

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章