如何在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函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript常用函数(1)
Nov 04 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
如何快速上手Vuex
Feb 14 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
Promise静态四兄弟实现示例详解
Jul 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
js实现简单数字变动效果
2017/11/06 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Django框架中方法的访问和查找
2015/07/15 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python使用代理ip访问网站的实例
2018/05/07 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
结构工程研究生求职信
2013/10/13 职场文书
在职证明书模板
2015/06/15 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
外出培训学习心得体会
2016/01/18 职场文书
mysql知识点整理
2021/04/05 MySQL
详解如何用Python实现感知器算法
2021/06/18 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python