vue项目报错,vue问题

　　在项目开发中，我们经常会遇到各种各样的错误，这些错误总是以这样或那样的方式得到解决。本文主要介绍如何处理vue项目中的错误的相关信息，有需要的朋友可以参考一下。

一、错误类型

　　任何框架都是处理错误的必备能力。

　　在Vue中，为用户定义了一套相应的错误处理规则，一些必要的流程在源代码级别进行处理。

　　的主要误差来源包括：

　　后端错误代码中的逻辑错误

二、如何处理

后端接口错误

　　网络请求的响应是通过axios的拦截器实现的，先进行一层拦截。

　　API client . interceptors . response . use(

　　响应={

　　返回响应；

　　错误={

　　if(error . response . status==401){

　　router . push({ name: log in })；

　　}否则{

　　message . Error(“Error”)；

　　return Promise.reject(错误)；

　　}

　　);

代码逻辑问题

全局设置错误处理

　　设置全局错误处理功能

　　vue . config . error handler=function(err，vm，info) {

　　//处理错误

　　//` info 是特定于Vue的错误信息，例如错误所在的生命周期挂钩。

　　//仅在2.2.0中可用

　　}

　　ErrorHandler指定一个处理函数，该函数在组件的呈现和观察过程中不捕捉错误。当调用这个处理程序时，它可以获得错误消息和Vue实例。

　　但是，值得注意的是，这个全局API的范围在不同的Vue版本中会有所不同：

　　从2.2.0开始，这个钩子也将捕获组件生命周期钩子中的错误。同样，当这个钩子未定义时，捕获的错误将通过console.error输出，以避免应用程序崩溃。

　　从2.4.0开始，这个钩子也将捕获Vue自定义事件处理程序中的错误。

　　从2.6.0开始，这个钩子也将捕获v-onDOM监听器内部抛出的错误。此外，如果任何被覆盖的挂钩或处理程序返回一个承诺链(例如异步函数)，来自其承诺链的错误也将被处理。

生命周期钩子

　　ErrorCaptured是2.5.0中的一个新的生命钩子函数，当一个来自后代组件的错误被捕获时，这个函数被调用。

　　基本类型

　　(err: Error，vm: Component，info: string)=？布尔型

　　这个钩子接收三个参数：错误对象、发生错误的组件实例和包含错误来源信息的字符串。这个钩子可以返回false来防止错误向上传播。

　　参考官方网站，错误传播规则如下：

　　默认情况下，如果定义了全局config.errorHandler，仍将发送所有错误，因此这些错误仍将报告给单个analysis service。如果在一个组件的继承或父从属链接中有多个errorCaptured钩子，它们将被相同的错误一个接一个地唤醒。如果这个errorCaptured挂钩本身抛出一个错误，新的错误和最初捕获的错误将被发送到全局配置。本质上是说“这个错误已经被修复，应该忽略”。它将阻止任何其他由该错误引起的错误捕获挂钩和全局config.errorHandler。这里有一个例子。

　　定义父组件类别

　　Vue.component(cat ，{

　　模板：` 1

　　差异

　　h1Cat: /h1

　　插槽/插槽

　　/div `，

　　道具：{

　　名称：{

　　必填：真，

　　类型：字符串

　　}

　　捕获的错误(错误，虚拟机，信息){

　　console . log(` cat EC:$ { err . tostring()} \ n info:$ { info } `)；

　　返回false

　　}

　　});

　　定义一个子组件kitten，这里没有定义dontexist()，有错误。

　　Vue.component(kitten ，{

　　模板： div h1 kitten:{ { dontexist()} }/h1/div ，

　　道具：{

　　名称：{

　　必填：真，

　　类型：字符串

　　}

　　});

　　页面中使用的组件

　　div id= app v-斗篷

　　猫名=我的猫

　　小猫/小猫

　　/猫

　　/div

　　在父组件的errorCaptured中，可以捕获信息。

　　cat EC: TypeError: dontexist不是函数

　　信息：渲染

附：Vue统一错误处理

　　使用Vue的全局错误处理程序

　　vue . config . error handler=function(err){

　　console.log(global ，err)；

　　message . Error(“Error”)；

　　};

　　//.这里省略了其他配置。

　　新Vue({

　　路由器，

　　店，

　　render: h=h(App)

　　}).$ mount( # app )；

总结一下

　　在需要捕获异常的地方调用HandleError。首先获取报告错误的组件，然后递归搜索当前组件的父组件，依次调用errorCaptured方法。当所有的errorCaptured方法或errorCaptured方法报错时，调用GlobalHandlerError方法GlobalHandlerError调用全局errorHandler方法，然后通过logError判断环境输出错误信息。invokeWithErrorHandling更好地处理异步错误信息，选择不同的错误抛出方法。在非生产环境中，调用warn方法来处理错误。本文介绍了如何手把手地处理vue项目中的错误。有关vue项目中错误处理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。