如何在Vue中抽离接口配置文件


Posted in Javascript onOctober 31, 2019

Vue中抽离接口配置文件的问题及解决方法

问题背景

在通常开发中,我们经常把接口配置文件写在src目录里,

虽然有了一些方便,但也引发出一个新的问题,就是每次接都要重新编译。

解决方法

如果是cli2在static文件夹下创建XXX.js文件 

如果是cli3在public文件夹下创建XXX.js文件

这两个文件夹下的内容将会原封不动地打包都dist里

在XXX.js下代码,定义全局变量,这样我们便能在任何地方使用

window.$4002API = {
  URL:'http://baidu.com',
  getAll:URL+'/aa/aa',//也能定义接口,到时在axios中调用
}

在main.js中引入XXX.js

import '../static/config/index'

使用

console.log($4002API.URL)//'http://baidu.com'   
console.log($4002API.getAll)//'http://baidu.com/aa/aa'

当打包的时候,在main.js中注释掉

// import '../static/config/index'

并在index.html文件中引入XXX.js

<script src="./static/config/index.js"></script>

总结

以上所述是小编给大家介绍的如何在Vue中抽离接口配置文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JS解析XML实例分析
Jan 30 Javascript
利用JS实现数字增长
Jul 28 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Vue简单实现原理详解
May 07 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 #Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 #Javascript
Vue最新防抖方案(必看篇)
Oct 30 #Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 #Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 #Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 #Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 #Javascript
You might like
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
通过shell+python实现企业微信预警
2019/03/07 Python
24式加速你的Python(小结)
2019/06/13 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python中的self用法详解
2019/08/06 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
自荐书模板
2013/12/15 职场文书
党员演讲稿
2014/09/04 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
大学生毕业个人总结
2015/02/15 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
人事任命通知
2015/04/20 职场文书
计划生育目标责任书
2015/05/09 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
导游词之千岛湖
2019/09/23 职场文书
MySQL创建定时任务
2022/01/22 MySQL