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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
不可错过的十本Python好书
2017/07/06 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python正则表达式学习小例子
2020/03/03 Python
python 绘制场景热力图的示例
2020/09/23 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
企业出纳岗位职责
2014/03/12 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年语言文字工作总结
2015/07/23 职场文书