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

需求原因

创新互联公司成立与2013年，是专业互联网技术服务公司，拥有项目成都网站设计、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元集宁做网站,已为上家服务,为集宁各地企业和个人服务,联系电话:18980820575

原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。

第一步安装插件

npm install --save-dev generate-asset-webpack-plugin

第二步新建配置文件

在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件

{"ProdUrl":http://text.com}

第三步引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

 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 打包生成公共配置文件（域名）方便动态修改,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

新闻名称：webpack+vue打包生成公共配置文件（域名）方便动态修改
本文地址：http://dzwzjz.com/article/pddejs.html

大橙子网站建设，新征程启航

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

其他资讯