webpack vue-cli2 區分測試 和 線上 環境

vue-cli2 自動創建的項目,已經給配合好了 dev 開發環境 和 prot 線上環境,但是實際開發中大部分會用到 test 測試環境。下面對測試環境進行配置。

vue-cli 版本 2.96 其他2.xx 的版本略有不同,其他2.xx版本 可以參考下邊的連接

https://www.jianshu.com/p/30d30d2835b2

1. 複製一份build/build.js 文件命名爲build/build-test.js 修改這三處地方
在這裏插入圖片描述
2. 複製一份build/webpack.prod.conf.js文件命名爲build/webpack.test.conf.js 修改這一處地方
在這裏插入圖片描述
3,然後去config/index.js文件下添加 assetsRootTest 屬性的值 值改成 dist-test。dist-test是打包測試環境的代碼輸出的文件夾
在這裏插入圖片描述
4,把 config/test.env.js 文件改成下圖這樣
在這裏插入圖片描述
5,創建 config/conf.js 文件用來添加不同環境的配置
在這裏插入圖片描述
6在main.js 文件中引入 conf.js 文件。並添加大Vue 原型對象上
在這裏插入圖片描述
7.在package.json 文件中添加打包 測試環境命令
在這裏插入圖片描述
之前unite2e 命令用的是test ,需要改一下,不然命令會衝突
所有步驟完成以後,就使用下邊的命令打包就可以了,打包完成後 根目錄下會自動生成dist-test 文件夾,這個就是測試環境打包好的代碼。可以直接放到測試服務器上看下 main.js 中的log 應該顯示的是 “測試” 兩個字

npm run test

最後附上一篇 vue-cli3 配置測試環境教程供參考
https://www.cnblogs.com/XHappyness/p/9337229.html

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