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 相关文章推荐
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JS正则表达式验证中文字符
May 08 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
Echarts如何重新渲染实例详解
May 30 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过滤XSS攻击的函数
2013/11/12 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php实现文件下载实例分享
2014/06/02 PHP
Yii学习总结之安装配置
2015/02/22 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
php验证码生成器
2017/05/24 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
jQuery中DOM操作实例分析
2015/01/23 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
ant design 日期格式化的实现
2020/10/27 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python远程登录代码
2008/04/29 Python
Python编写屏幕截图程序方法
2015/02/18 Python
python实现简单温度转换的方法
2015/03/13 Python
Python使用剪切板的方法
2017/06/06 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
在Python中定义一个常量的方法
2018/11/10 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
食品安全承诺书范文
2014/08/29 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
z-index不起作用
2021/03/31 HTML / CSS
SQL Server表分区删除详情
2021/10/16 SQL Server