如何在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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
js实现录音上传功能
Nov 22 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php5 and xml示例
2006/11/22 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
表单内同名元素的控制
2006/11/22 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python使用tornado实现简单爬虫
2018/07/28 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
几道PHP的面试题
2012/05/19 面试题
医院实习介绍信
2014/01/12 职场文书
表彰大会策划方案
2014/05/13 职场文书
军训拉歌口号
2014/06/13 职场文书
2014年学前班工作总结
2014/12/08 职场文书
观后感开头
2015/06/19 职场文书
爱国之歌(8首)
2019/09/29 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python