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


Posted in Javascript onAugust 29, 2019

需求原因

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

第一步 安装插件     

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

Javascript 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
vue发送ajax请求详解
Oct 09 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 #Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
You might like
基于php-fpm的配置详解
2013/06/03 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jQuery 1.0.2
2006/10/11 Javascript
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
js同时按下两个方向键
2007/12/01 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python集合删除多种方法详解
2020/02/10 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
《临死前的严监生》教学反思
2014/02/13 职场文书
五一促销活动总结
2014/07/01 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
详解Python类和对象内容
2021/06/22 Python