vue打包之后生成一个配置文件修改接口的方法


Posted in Javascript onDecember 09, 2018

前言:

我们的vue代码打包上传到服务器之后,要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口。

能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只需打开记事本 修改一下域名即可。

教程:

第一步:安装generate-asset-webpack-plugin插件

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

第二步:配置webpack.prod.conf.js文件

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://198.129.31.108:8080"};
 return JSON.stringify(cfgJson);
}
//让打包的时候输入可配置的文件
//这段代码加在plugins:[]中
  new GenerateAssetPlugin({
    filename: 'serverconfig.json',
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

第三步:输入npm run build打包代码  结果如下

vue打包之后生成一个配置文件修改接口的方法

第四步:以后需要修改域名之类的  在serverconfig.json修改即可

vue打包之后生成一个配置文件修改接口的方法

第五步:获取ApiUrl

//在main.js中定义一个全局函数
Vue.prototype.getConfigJson=function(){
  this.$http.get("serverconfig.json").then((result)=>{
    //用一个全局字段保存ApiUrl 也可以用sessionStorage存储
    Vue.prototype.ApiUrl=result.body.ApiUrl;
  }).catch((error)=>{console.log(error)});
}

第六步:使用ApiUrl

//在app.vue里面 执行this.getConfigJson();
mounted:function(){
   this.getConfigJson();
}
//之后...用在需要用到的地方 因为ApiUrl已经是全局了 可以直接用this.ApiUrl
var url=this.ApiUrl+'/api/....

总结

以上所述是小编给大家介绍的vue打包之后生成一个配置文件修改接口的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JS一次前端面试经历记录
Mar 19 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
You might like
简单谈谈favicon
2015/06/10 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python处理二进制数据的方法
2015/06/03 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
房屋租赁意向书
2014/04/01 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
考察现实表现材料
2014/05/19 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
继承权公证书范本
2015/01/23 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
redis cluster支持pipeline的实现思路
2021/06/23 Redis
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL