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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
vue引入js数字小键盘的实现代码
May 14 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 开源框架22个简单简介
2009/08/24 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php fread函数使用方法总结
2019/05/28 PHP
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python操作mysql代码总结
2018/06/01 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
在django view中给form传入参数的例子
2019/07/19 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
详解Python IO编程
2020/07/24 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
财务部岗位职责
2013/11/19 职场文书
21岁生日感言
2014/02/27 职场文书
学习十八大报告感言
2014/02/28 职场文书
成龙洗发水广告词
2014/03/14 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
闭幕式主持词
2014/04/02 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL