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技巧--转义符"\"的妙用
Jan 09 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
JavaScript实现网页留言板功能
Nov 23 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php中apc缓存使用示例
2013/12/25 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
20年同学聚会感言
2014/02/03 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
担保书怎么写 ?
2019/04/22 职场文书