javascript - vue-cli怎么根據后端接口服務器不同 build不同接口代碼？

問題描述

開發過程中 npm run dev 組件中接口調取的地址是 全局global定義的一個API變量如下：

// 開發環境打開// global.API = ’/api’;

// 測試環境打開// global.API = ’/test’;

// uat環境打開// global.API = ’/uat’;

// 生產環境打開// global.API = ’/www’;

生產環境 npm run build 時如何根據不同接口自動改變API成生產環境變量？

問題解答

琢磨了幾天vue-cli生成的代碼，vue覺得你只需要三種配置：開發（npm run dev）、生產（npm run build）和單元測試（npm run test）。。。

吐槽完。

1.打開config/index.js，修改build里面的env文件名為根據環境變量獲取，修改完大概是下面這樣子：

module.exports = { build: { env: require(’./’+(process.env.VUE_CONFIG||’prod’)+’.env’), //......

2.在config目錄里面把prod.env.js復制兩份，分別是uat.env.js、testing.env.js

3.修改dev.env.js、uat.env.js、testing.env.js、prod.env.js這四個文件，在大括號里面添加API: ’'/api或uat或其他什么'’,如下：

module.exports = { NODE_ENV: ’'production'’, API: ’'/api'’}

4.然后就可以在任何地方通過process.env.API訪問到這個變量了。

5.打包的時候，先設置環境變量VUE_CONFIG，例如export VUE_CONFIG=uat && npm run build。

https://stackoverflow.com/que...

https://github.com/tonyljl526... 可以看下這個項目的腳手架，基于express和vue2、webpack的。能實現你的需求,主要看config/renderConfig.js