如何在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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue实现菜单切换功能
May 08 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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 数组入门教程小结
2009/05/20 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
javascript读取xml
2006/11/04 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python实发邮件实例详解
2019/11/11 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android