vue根据环境变量打包项目

当你的项目分为多个地区的时候，而且每个地区的逻辑稍微有点差异的情况下，不需要每个地区都打包一次，只需要根据环境变量配置一个公共文件即可

1、新建多个环境变量文件

2、新建globelParams.js

//globelParams.js

const taiYuan = {
  NODE_ENV:'taiYuan',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://221.204.12.135:31568/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_shanxi.png'),
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'太原市公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://183.201.195.129:6388',
  VUE_APP_WS:'ws://183.201.195.129:6388',
  VUE_APP_LEASE_WS:'ws://183.201.195.129:9002',
  VUE_APP_GPSTRAN:'gps'
}

const yangQuan = {
  NODE_ENV:'yangQuan',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://183.203.192.98:32568/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_shanxi.png'),
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'阳泉市公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://183.201.195.129:6388',
  VUE_APP_WS:'ws://183.201.195.129:6388',
  VUE_APP_LEASE_WS:'ws://183.201.195.129:9002',
  VUE_APP_GPSTRAN:'gps'
}

// 甘肃
const dingXi = {
  NODE_ENV :'dingXi',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'http://123.249.13.206:32575/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:'',
  VUE_APP_WXQRCODE:'',
  VUE_APP_SYSTEMATICTITILE:'甘肃省级公务用车管理监督平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'http://123.249.13.206:32583',
  VUE_APP_WS:'ws://123.249.13.206:32583',
  VUE_APP_LEASE_WS:'',
  VUE_APP_GPSTRAN:'gps'
}

const lanZhou = {
  NODE_ENV :'lanZhou',
  VUE_APP_THEME:'blue',
  VUE_APP_YZWMAPSHOW:1,
  BASE_URL:'/',
  VUE_APP_URL:'/api',
  VUE_APP_SSE:'https://lanzhou.easted.net.cn/api',
  PATH_SUFFIX:'/',
  VUE_APP_QRCODE:require('@/assets/images/v1/app_download_lanzhou.png'),
  VUE_APP_WXQRCODE:require('@/assets/images/v1/wx_download_lanzhou.jpg'),
  VUE_APP_SYSTEMATICTITILE:'兰州市公务用车管理服务平台',
  VUE_APP_RETENTION_TIME:5,
  VUE_APP_RETENTION_DISTANCE:20,
  VUE_APP_WSBOOK:'https://gansugis.easted.net.cn',
  VUE_APP_WS:'wss://gansugis.easted.net.cn',
  VUE_APP_LEASE_WS:'',
  VUE_APP_GPSTRAN:'gps'
}


class GlobelParams{
  static instance = null
  map = {
    '183.201.195.129:32568':shengZhi,
    '211.93.251.14:32568':jinZhong,
    '60.221.62.32:32568':linFen,
    '124.165.218.186:31568':lvLiang,
    '221.204.12.135:31568':taiYuan,
    '183.203.192.98:32568':yangQuan,
    '183.203.88.9:32568':yunCheng,
    '60.220.220.251:32568':changZhi,
    '111.53.37.136:32568':xinZhou,
    // 甘肃
    '123.249.13.206:32575':dingXi,
    'lanzhou.easted.net.cn':lanZhou
  }

  init(){
    const currentCity = this.map[window.location.host] || process.env;
    return currentCity;
  }

  static getInstance(){
    if(!GlobelParams.instance){
      GlobelParams.instance = new GlobelParams().init()
    }

    return GlobelParams.instance
  }
}

export default GlobelParams

3、在axios接口请求时调用

export const request = axios.create({
  baseURL: GlobelParams.getInstance().VUE_APP_URL,
  timeout: 10000,
});