vue 專案 webpack 中 NPM 傳遞引數配置不同域名介面

程式設計師的貓發表於2019-07-25
VueWebNPM

專案開發中，前端在配置後端api域名時很困擾，常常出現:
本地開發環境: api-dev.demo.com
測試環境: api-test.demo.com
生產環境: api.demo.com，

在Vue.js專案中打包，教大家個方法：

使用 npm run build -- xxx ，根據傳遞引數xxx來判定不同的環境，給出不同的域名配置。

專案中/config/dev.env.js修改：

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

 NODE_ENV: '"development"',

 HOST: '"dev"'

})

專案中/config/prod.env.js修改：

'use strict'

let HOST = process.argv.splice(2)[0] || 'prod';

console.log(HOST);

module.exports = {

 NODE_ENV: '"production"',

 HOST: '"'+HOST+'"'

}

專案中ajax封裝的地方修改：

/**
** 設定API介面域名
**/

let apiUrl = '';
// 根據 process.env.HOST 的值判斷當前是什麼環境
// 命令：npm run build -- test ，process.env.HOST就設定為：'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;

apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;

打包命令

npm run build -- xxx

  • 注意–是2個橫槓，前後都有空格，後面跟引數，這樣 process.env.HOST 獲取到引數 'xxx' 了。
apiUrl = "http://api-xxx.demo.com"
本作品採用《CC 協議》，轉載必須註明作者和本文連結
你還差得遠吶！

相關文章