webpack + vue 打包生成公共配置文件（域名） 方便动态修改

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
 return JSON.stringify(serverConfig);
};
//plugins 中使用
 plugins: [
 //打包时生成一个配置文件
 new GenerateAssetPlugin({
  filename: 'serverConfig.json',
  fn: (compilation, cb) => {
   cb(null, createJson());
  },
 }),
]

第四步 使用配置文件中的内容

这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用，项目中封装了axios，并对请求拦截做了处理

service.interceptors.request.use(
 async (config) => {
  var baseURL = process.env.BASE_API
  if(process.env.NODE_ENV === "production"){
  await axios.get('serverConfig.json').then( e => {
   baseURL = e.data.ProdUrl
  })
  }
  config.baseURL = baseURL
  if (store.getters.token) {
  // 让每个请求携带token
  config.headers["X-Token"] = getToken();
  config.headers = {
   "X-Token": getToken(),
   "Content-Type": "application/json-patch+json"
  };
  }
  return config;
 },
 error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
 }
 );

变黄的部分则是获取配置文件的方法，由于是使用axios获取，是异步方法，根据情况进行处理。、

好了接下来就再也不用为了域名每天build了

打包后的目录

总结

以上所述是小编给大家介绍的webpack + vue 打包生成公共配置文件（域名） 方便动态修改,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对安科网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！