在Vue类型脚本中的Vue上安装axios时报告的错误

在vue项目的开发过程中，为了方便调用各个组件中的axios，我们通常会在入口文件中的vue原型上挂载axios，如下所示：main.ts

从“vue”导入Vue，从“axios”导入。/utils/http ' vue . prototype . $ axios=axios；这样，我们就可以直接用这个了。$axios在各种组件中发出请求时，但在使用这个组件时。$axios要在ts中提出请求，我们将报告如下所示的错误：

从图中我们可以看到，ts在Vue中检测不到$axios。通过网上搜索发现：在ts中，$axios挂在vue下，不能挂在原型链上。也就是说，当我们在Vue原型上手动挂载$ axios时，ts无法识别它。

解决方案1:手动告诉ts忽略这里的类型检测

虽然ts检测不到Vue原型的原型，但实际上我们是成功挂载的，这意味着我们可以正常使用。唯一需要解决的问题是ts的类型检测。因此，我们可以将其指定为任何类型，这样我们就可以避免错误报告的问题。如下图所示：

(如有)。$ axios。post ('/API/users/login '，这个。规则形式)。然后((res: {data:any})={}但是使用任何方式都意味着失去类型安全性并且无法获得工具的支持。

解决方案2:使用vue-axios包来处理这个挂载问题

我们可以通过使用封装vue-axios来解决这个安装问题。Vue-axios是基于axios的扩展插件，它扩展了Vue.prototype上的$http等属性，使得axios的使用变得更加容易。

# install npmi axios NPM I vue-axios-S # register vue . use(axios，vue-axios)# use this.axios()通过使用vue-axios包，我们可以直接调用this.axios。

从上面我们可以看到，vue-axios帮助我们在vue原型机上挂载axios，ts可以检测到。这样，完全避免了ts报告错误的问题。

解释

在用ts开发的过程中，会遇到各种报错问题。希望记录下来，避免下次再踩坑，帮助别人。

摘要

以上是在边肖介绍的Vue Typescript中，axios安装在Vue上时报告的一个错误。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！