前端打包之后的文件 想修改某些变量 如何做？比如请求地址的修改

版本环境： vue2.x + vue-cli4 + webpack4x

如果是只是修改一个变量的值， 那简单暴力的方法就是去打包之后对应的文件里面去修改值。但是这种方法 太暴力， 不安全； 

1. 可以单独创建一个配置文件.js 或者.json， 该配置文件不需要经过打包处理 ， 所以我们可以直接放到static 文件夹下， 如果没有的话 ，就在public 下创建一个 ; 如下图所示

在config.js 中  将所需要的变量挂载到window上 或者 直接挂载到一个全局变量上

//  自定义变量 挂载上window上
window.customVariables = {
    baseURL: 'http://192.20.96.52:8050//vc_manage_server111111'
}

或者

//  自定义变量 直接挂载到一个全局变量上
var customVariables = {
    baseURL: 'http://192.20.96.52:8050//vc_manage_server111111'
}

同时需要在index.html 中引入config.js; 

然后在需要的地方中直接使用 比如 axios 的baseURL :

打包之后的文件 中该属性就可以动态获取到了

2. webpack 打包使用插件generate-asset-webpack-plugin， 自动生成所需要的配置文件

其实这个插件从名字就可以看出， 他的主要作用就是不需要我们手动生成配置文件， 会自动生成一个文件

1) 安装 npm install generate-asset-webpack-plugin --save-dev

2）在vue.config.js 中 进行配置

const createServerConfig = function (compilation) {
  let config = {
    baseURL: "http://192.20.96.52:8050/xxxx",//接口地址
  };
  return JSON.stringify(config);
}

module.exports = {
  chainWebpack(config) {
    config.plugin('GenerateAssetWebpackPlugin')
     .use(require('generate-asset-webpack-plugin'))
      .tap((args) => {
      return [
        {
          filename: 'config.json', // 最终生成的文件名称
          fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
          },
          extraFiles: []
        }
      ]
    })
  }
}

3) main.js 中引入 axios 或者 项目中使用的自己封装的axios

我这边引入的是封装过的axios ， 异步获取上述的json 文件

import request from './utils/request'

// 异步获取
request.get('config.json').then(res => {
  console.log('获取到配置文件的内容====', res)
  // 可以挂载到Vue原型，也可以使用localStorage 、 
  Vue.prototype.baseURL = res.data.baseURL
  request.defaults.baseURL = res.data.baseURL  // 修改 baseURL
})

// 要查看下自己封装的axios 是否有其他处理， 避免json 文件请求的时候 没有返回
// response 返回拦截器
service.interceptors.response.use(async res => {
   if (res.config.url == 'config.json') {
		return res;
	} else {
		return responseHandle(res)
	}
},
	error => {// 
     return Promise.reject(error)
	}
)