vue.js在开发模式和产品模式中配置API URL

编辑config/dev.env.js

 

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_URL:'"http://localhost:9104/"',
  IMG_URL:'"http://localhost:9103/"'
})

 编辑config/prod.env.js

 

 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_URL:'"http://localhost:9104/"',
  IMG_URL:'"http://localhost:9103/"'
}

 读取的时候可以

process.env.IMG_URL和process.env.API_URL

如

Vue.prototype.$cfg = {imgBase:process.env.IMG_URL,apiBase:process.env.API_URL};

 相关原理说明

https://doc.webpack-china.org/plugins/define-plugin/

https://killerlei.github.io/2017/10/08/vue-cli%E4%B8%ADprocess-env-NODE-ENV/

https://vuejs-templates.github.io/webpack/env.html

https://github.com/airyland/vue-config