開發過程中 npm run dev 元件中介面調取的位址是 全域global定義的一個API變數如下:
// 開發環境開啟// global.API = '/api';
// 測試環境開啟// global.API = '/test';
// uat環境開啟// global.API = '/uat';
// 生產環境開啟// global.API = '/www';
生產環境 npm run build 時如何根據不同介面自動改變API成生產環境變數?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
琢磨了幾天vue-cli產生的程式碼,vue覺得你只需要三種設定:開發(npm run dev)、生產(npm run build)和單元測試(npm run test)。 。 。
吐槽完。
1.打開config/index.js,修改build裡面的env文件名為根據環境變量獲取,修改完大概是下面這樣子:
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
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或其他什麼"',如下:
dev.env.js
API: '" /api或uat或其他什麼"'
module.exports = { NODE_ENV: '"production"', API: '"/api"' }
4.然後就可以在任何地方透過process.env.API存取到這個變數了。
process.env.API
5.打包的時候,先設定環境變數VUE_CONFIG,例如export VUE_CONFIG=uat && npm run build。
VUE_CONFIG
export VUE_CONFIG=uat && npm run build
https://stackoverflow.com/que...
https://github.com/tonyljl526... 可以看下這個專案的鷹架,基於express和vue2、webpack的。能實現你的需求,主要看config/renderConfig.js
琢磨了幾天vue-cli產生的程式碼,vue覺得你只需要三種設定:開發(npm run dev)、生產(npm run build)和單元測試(npm run test)。 。 。
吐槽完。
1.打開
config/index.js
,修改build
裡面的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或其他什麼"'
,如下: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