在 Vue 中添加具有定义的 GlobalErrorhandler 的插件

Question

我编写并添加了一个 globalerrorhandler (Vue.config.errorHandler, window.onerror, ...)

我关注了vue网站上的《在vue中编写插件》

但我收到以下错误，我不知道为什么： 'MyPlugin' 未定义

我在我的项目中创建了一个 pluginFolder。在此文件夹中，我添加了另一个文件夹“GlobalErrorHandler”。在此文件夹中，我添加了“MyPlugin.js”。

App.vue:

import MyPlugin from './plugins/GlobalErrorHandler'
Vue.use(MyPlugin);

MyPlugin.js中的代码：

MyPlugin.install = function (Vue){
    Vue.config.errorHandler = function(err, info) {
      
        const toSend = {
          "error": err,
          "info": info
        }
      
        const jsonString = JSON.stringify(toSend);
        const xhr = new XMLHttpRequest();
              
              xhr.open("POST", "http://localhost:8090/api/auth/event");
              xhr.setRequestHeader("Content-Type", "application/json");
              xhr.send(jsonString);
              console.log(jsonString);
        
        };

}

Answer 1

MyPlugin 对象必须先存在，然后才能添加 install 属性：

const MyPlugin = {};  // Create the object

和MyPlugin.js需要导出对象，否则无法导入：

export default MyPlugin;  // export for importing

放在一起：

const MyPlugin = {};
MyPlugin.install = function (Vue){
  Vue.config.errorHandler = function(err, info) {

    const toSend = {
      "error": err,
      "info": info
    }

    const jsonString = JSON.stringify(toSend);
    const xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost:8090/api/auth/event");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(jsonString);
    console.log(jsonString);

  };
}
export default MyPlugin;

在 Vue 中添加具有定义的 GlobalErrorhandler 的插件

Add Plugin with defined GlobalErrorhandler in Vue

javascript

plugins

vue.js