問題描述

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

// 開發(fā)環(huán)境打開// global.API = ’/api’;

// 測試環(huán)境打開// global.API = ’/test’;

// uat環(huán)境打開// global.API = ’/uat’;

// 生產(chǎn)環(huán)境打開// global.API = ’/www’;

生產(chǎn)環(huán)境 npm run build 時如何根據(jù)不同接口自動改變API成生產(chǎn)環(huán)境變量？

問題解答

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

吐槽完。

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

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.打包的時候，先設置環(huán)境變量VUE_CONFIG，例如export VUE_CONFIG=uat && npm run build。

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

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