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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
JS链式调用的实现方法
Mar 07 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
详解JS函数防抖
Jun 05 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牛逼的面试题分享
2013/01/18 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
django模板结构优化的方法
2019/02/28 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python笔记之facade模式
2019/11/20 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
css3 transform属性详解
2014/09/30 HTML / CSS
Weblogc domain问题
2014/01/27 面试题
师说教学反思
2014/02/07 职场文书
企业承诺书怎么写
2014/05/24 职场文书
消防演习通知
2015/04/25 职场文书
如何写观后感
2015/06/19 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis