vue打包傳遞參數配置域名

項目開發中，前端在配置後端api域名時很困擾，經常出現:

本地開發環境: api-dev.demo.com

測試環境: api-test.demo.com

線上生產環境: api.demo.com，

此次是在Vue.js項目中打包，教你們個方法：

使用 npm run build -- xxx   ，根據傳遞參數xxx來斷定不一樣的環境，給出不一樣的域名配置。

1.項目中/config/dev.env.js修改：

新增：HOST: '"dev"'

'use strict'

const merge = require( 'webpack-merge' )

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

module.exports = merge(prodEnv, {

  NODE_ENV: '"development"' ,

  HOST: '"dev"'

})

2.項目中/config/prod.env.js修改：

獲取傳遞進來的參數：

'use strict'

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

console.log(HOST);

module.exports = {

  NODE_ENV:  '"production"' ,

  HOST:  '"' +HOST+ '"'

}

3.項目中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;

4.最後敲命令：

npm run build -- test

注意–是2個橫槓， 後面跟參數，這樣  process.env.HOST 就獲取到參數  'test'  了,

apiUrl = ' http://api-test.demo.com'

若線上prod發佈打包，npm run build -- prod

apiUrl = ' http://api.demo.com'