由于項目需要在各種環(huán)境的打包切換過程中,由于缺少環(huán)境常量需要手動修改相關(guān)請求Api域名等配置達到預期目的。
進而導致如果項目存在多個環(huán)境時，多環(huán)境沒辦法自動化構(gòu)建。比較麻煩,故此增加此配置方法,操作方法如下:
提示:
npm run serve時會把 process.env.NODE_ENV 設置為 ‘development’；
npm run build 時會把 process.env.NODE_ENV 設置為 ‘production’；
第一步. 創(chuàng)建 .env 文件
在根目錄 創(chuàng)建 .env 文件, 內(nèi)容如下
VUE_APP_PROJ_NAME = '默認地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.88'
vue-cli中規(guī)定
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。
代碼中可以通過process.env.VUE_APP_SECRET這樣訪問。
第二步.創(chuàng)建.env.test文件
VUE_APP_PROJ_NAME = '測試地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.99'
第三步.創(chuàng)建.env.pro文件
VUE_APP_PROJ_NAME = '生產(chǎn)地址'
VUE_APP_BASE_URL = 'http://xx.xx.xx.66'
第四步.修改 package.json 文件
"scripts":?{
?????"serve":?"vue-cli-service?serve",? //本地運行 默認取 .env 文件內(nèi)容
? ? ?"serve:test":?"vue-cli-service?serve?--mode?test",???//運行 測試地址 取.env.test 文件內(nèi)容
? ? ?"serve:pro":?"vue-cli-service?serve?--mode?pro",??//運行 生產(chǎn)地址 取.env.pro 文件內(nèi)容
? ? ?"build":?"vue-cli-service?build",?//本地打包?默認取 .env 文件內(nèi)容
? ? ?"build:test":?"vue-cli-service?build?--mode?test", //打包 生產(chǎn)地址 取.env.pro 文件內(nèi)容
? ? ?"build:pro":?"vue-cli-service?build?--mode?pro" //打包 生產(chǎn)地址 取.env.pro 文件內(nèi)容
?}
/注意，這里 “--mode?名字“ 要和步驟2中文件名 “.env.名字” 名字保持一致
第五步.在vue.config.js?加入如下代碼:
devServer:?{
????port:?'8123',?//代理端口
????open:?false,?//項目啟動時是否自動打開瀏覽器，我這里設置為false,不打開，true表示打開
????proxy:?{
?????????'/api':?{
????????????????target:?process.env.VUE_APP_HTTP_URL, // 配置里 接口地址
????????????????changeOrigin:?true,?//是否跨域
? ? ? ? ? ? ? ? pathRewrite:?{?//重寫路徑
????????????????????????'^/api':?'/'??
????????????????}
? ? ? ? ? ? }
????????}
? ??}
第六步.在http 的封裝的 axios 請求中, 加入如下代碼:
// 配置里 本地請求 虛擬代理地址 與 proxy 名稱 相同 即 ==>? /api/
// 生產(chǎn)環(huán)境 則是 接口實際地址 http://xx.xx.xx.xx , 如有跨域 需要服務器 做一下 接口轉(zhuǎn)發(fā)即可
axios.defaults.baseURL?= process.env.NODE_ENV?===?'development'???'/api/'?:?process.env.VUE_APP_HTTP_URL;
第七步.運行 / 打包不通環(huán)境
npm run serve? // 默認地址 .env
npm run build // 默認地址 .env
npm run serve:test // 測試地址?.env.test
npm run build?:test // 測試地址
npm run serve:pro // 生產(chǎn)地址?.env.pro
npm run build?:test // 測試地址
