如何在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的多级联动代码
Jan 24 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
AngularJS实现路由实例
Feb 12 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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/01/16 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
javascript数组去掉重复
2011/05/12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
OpenCV 模板匹配
2019/07/10 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
档案保密承诺书
2014/06/03 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
服务整改报告
2014/11/06 职场文书
计算机教师工作总结
2015/08/13 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python