項目開發中常分為開發環境、測試環境、正式環境
通過vue-cli或者@vue/cli腳手架搭建的項目默認提供了開發環境和正式環境的配置。可通過js獲取當前域名或其他信息來判斷當前為測試環境還是正式環境來加載執行對應的東西,例如請求的服務端地址、不同的圖片資源等等,但這樣很不方便,可通過配置build命令來構建測試包和正式包。
以vue-cli為例:下面是vue-cli生成的目錄結構,包含了build和config配置文件夾
首先安裝cross-env插件:npm install cross-env --save-dev
(cross-env的作用:通過js在項目中設置不同的環境變量的插件)
第一步:在build文件夾內新建build_test.js文件,內容復制build.js
修改process.env.NODE_ENV = "buildtest"和const webpackConfig = require('./webpack.test.conf')
第二步:在build文件夾內新建webpack.test.conf.js文件,內容復制webpack.prod.conf.js
修改const env = require('../config/test.env')
第三步:修改build/utils.js
第四步:修改build/webpack.base.conf.js
第五步:修改config/index.js中build配置對象,將測試環境和正式環境的打包文件分文件夾存放
第六步:在config文件夾內新建test.env.js,內容為:
對應dev.env.js & prod.env.js配置開發環境和正式環境的baseURL等信息
第七步:在package.json -> "script": {}中配置相關執行命令
npm run dev / npm run serve / npm run start運行開發環境
npm run build:prod構建正式包
npm run build:test構建測試包
npm run publish同時構建測試包和正式包
注:
項目中可使用process.env.NODE_ENV判斷三個環境,process.env.baseURL獲取對應環境的服務端請求地址