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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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/06/03 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
PHP中SESSION过期设置
2021/03/09 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js正则相关知识点专题
2018/05/10 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
Python3 Random模块代码详解
2017/12/04 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python常用排序算法的实现代码
2019/11/08 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
幼儿园新年寄语
2014/04/03 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
绿色小区申报材料
2014/08/22 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL