当前位置: 首页 > 编程笔记 >

如何在Vue中抽离接口配置文件

贾飞鸿
2023-03-14
本文向大家介绍如何在Vue中抽离接口配置文件,包括了如何在Vue中抽离接口配置文件的使用技巧和注意事项,需要的朋友参考一下

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中抽离接口配置文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 本文向大家介绍基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法,包括了基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法的使用技巧和注意事项,需要的朋友参考一下 背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式,都是半自动化的,还需要重新修改。 需求点

  • 我目前正在做一个ReactJS项目,它使用了Webpack2和TypeScript。除了一件事之外,一切都运行得很好——我找不到一种方法将我自己编写的接口移动到单独的文件中,以便它们对整个应用程序可见。 出于原型设计的目的,我最初在使用它们的文件中定义了接口,但最终我开始添加一些在多个类中需要的接口,这时所有的问题都开始了。无论我对我的< code>tsconfig.json做什么更改,也无论我把

  • 想要在vite的配置文件中,配置:setupFile: 但是我按照上面配置,会报错:

  • webpack3.8.1 使用commonChunkPlugin对代码进行分割,提取出vendors,mainfest,发现类似0.xxx.js这样的chunk中包含依赖,如echarts, 1.请问要如何配置才可以分离出 非入口0.xxx.js中的echarts依赖? 2.如果再在图1的commonChunkPlugin中继续增加类似 new webpack.optimize.CommonsCh

  • 我使用中的此选项在服务器中运行: 我得到这个错误: 分析INI配置文件时出错:未知的选项安全性。

  • 我正在尝试安装和配置nginx,但我需要复制一个完整的配置文件。我尝试简单地将它添加到Dockerfile中,因为它只有几行,但Dockerfile似乎对多行命令没有很好的支持。我的意思是我需要复制我的配置文件的原样,我不能污染它的'sed','cat'或'\'在每一行。 有些人建议将配置文件放在公共git存储库中,我想如果没有其他方法的话,我可以这么做。但我一点也不喜欢,因为这没道理。我不想为这