前端开发中 vue项目中常见的错误处理( 二 ) _vue

小结

handleError在需要捕获异常的地方调用，首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用errorCaptured 方法，在遍历调用完所有 errorCaptured 方法或 errorCaptured 方法有报错时，调用 globalHandleError 方法
globalHandleError调用全局的 errorHandler 方法，再通过logError判断环境输出错误信息
invokeWithErrorHandling更好的处理异步错误信息
logError判断环境，选择不同的抛错方式。非生产环境下，调用warn方法处理错误

其它错误1、在配置路由并引入组件后，报错：

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

错误原因：vue-router没有注册
解决办法：
//注册插件 *****************非常重要，不能忘记
Vue.use(VueRouter)
2、在组件中的标签和样式中图片路径出错时：报错：

Errors while compiling. Reload prevented.
Module not found: Error: Can't resolve '
./src/assets/img/btn_bg.png' in 'E:myStudyvue案例chexian-spasrccomponents'

解决办法：将图片的路径重新书写
3、在组件中标签没有闭合，报错：

Errors while compiling. Reload prevented.
./node_modules/_vue-loader@13.4.0@vue-loader/lib/template-compiler?{"id":"data-v-00822b28","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/_vue-loader@13.4.0@vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/BaseProject.vue

(Emitted value instead of an instance of Error)

解决办法：检查html代码
4、在使用less定义变量是报错：

文章插图

错误原因：必须用分号结尾：@imgUrl:'../../assets/img/';

文章插图

Compiled with problems:
编译问题
C:myelsrcviewsHomeView.vue
错误出现文件

3:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs
4:1 error Mixed spaces and tabs no-mixed-spaces-and-tabs

第3行的第一个字符
第4函的第一个字符
Mixed spaces and tabs
错误原因：混合的空格与tab
no-mixed-spaces-and-tabs
错误规则： no-mixed-spaces-and-tabs 不准混空格与tab
2 problems (2 errors, 0 warnings)
【前端开发中 vue项目中常见的错误处理】2个问题（2个错误，0个警告）

文章插图

Compiled with problems:
编译错误
ERROR in ./src/views/HomeView.vue?
错误出现的位置
Unexpected keyword 'const'. (6:0)
第6行第0个字符有个不应该出现的关键字 const
63 | const user = reactive({ userid: "", pwd: "", code: "" }), | ^ 64 | const rules = reactive({ | ^ 65 | userid: [
第63到64行两个^之间有错误