如何在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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
无线电的诞生过程
2021/03/01 无线电
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
RC4文件加密的python实现方法
2015/06/30 Python
python pandas修改列属性的方法详解
2018/06/09 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python把1变成01的步骤总结
2019/02/27 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python的re模块使用方法详解
2019/07/26 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
2016年国陪研修感言
2015/11/18 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL