全局异常（QuasarV2 Vue3 Quasar-cli）

全局异常（QuasarV2 Vue3 Quasar-cli）

目录

• 对于传统vue的处理

• 对于Quasar-cli的完整记录( 全局异常捕获）

  • 1.配置启动文件

  • 2.写异常捕获启动文件的逻辑

  • 3.然后手动抛出异常试试

对于传统vue的处理

在main.js文件进行处理即可

import Vue from 'vue'
//系统错误捕获
const errorHandler = (error, vm)=>{
  console.error('抛出全局异常');
  console.error(vm);
  console.error(error);
  
}

Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);

对于Quasar-cli的完整记录( 全局异常捕获）

首先 vue2的quasar v1.x 和 vue3的quasar 2.x 是不一样的，我这里记录的是quasar2的！！
具体就是启动文件属性，少了vue这个属性，导致写法上有些不同

1.配置启动文件

quasar这里没有main.js文件。但是官网对此进行了说明

https://quasar.dev/quasar-cli-webpack/boot-files

也就是针对你需要的功能，单独设立启动文件

我这里就手动增加一个ErrorHandler的全局异常捕捉的启动文件

$ quasar new boot ErrorHandle

此时quasar就会帮我们生成这个文件src\boot\ErrorHandler.js。
生成好了还不行，还需要再quasar.config.js中进行引用

2.写异常捕获启动文件的逻辑

src\boot\ErrorHandler.js

import { boot } from "quasar/wrappers";
import { errorHandler } from "src/utils/errorHandler";
 
export default boot(async ({ app }) => {
  // something to do
  console.log(
    "hehx 自定义quasar 启动文件 参考 http://www.quasarchs.com/quasar-cli/boot-files"
  ); 
  app.config.errorHandler = errorHandler; 
});

这里我在src/utils/errorHandler定义了捕获的逻辑（名字一样不要介意，本人不太专业）

//  src\utils\ErrorHandler.js
import { Dialog } from "quasar";
export function errorHandler(err, vm, info) {
  Dialog.create({ title: "抱歉，发生了异常", message: err.message })
    .onOk(() => {
      window.location.replace("https//localhost");
    })
    .onCancel(() => {
      window.location.replace("https//localhost");
    })
    .onDismiss(() => {
      window.location.replace("https//localhost");
    });
  // console.error(err.message);
  // history.go(-1);
  // debugger;
}

3.然后手动抛出异常试试

// 在vue文件内
 getEncryptIdCard() {
      throw new Error("手动外部异常");
      return idCardNumberEncrypt(this.userIdCardNo);
    },