本文適合使用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