Vue使用Grpc时的问题

我有一个使用java的grpcDemo服务端正在监听9999端口 想在vue中使用grpc完成远程过程调用 可是出现了错误 我使用了webstrom构建了vue项目

package.json

{
  "name": "mountains-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "grpc": "^1.24.4",
    "vue": "^2.6.11",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@google-cloud/vision": "^2.3.0",
    "@grpc/proto-loader": "^0.5.6",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "^2.1.0",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

test.proto

syntax = "proto3";


// 服务接口.定义请求参数和相应结果
service AddService {
  rpc add (AddRequest) returns (AddReply) {
  }
}

// 定义请求体
message AddRequest {
  int32 a = 1;
  int32 b = 2;
}

// 定义相应内容
message AddReply {
  int32 c = 1;
}

我使用了项目自动生成的vue文件测试页面

Helloworld.vue

<template>
  <v-container>
    <v-btn
        @click="on">
      hello
    </v-btn>
  </v-container>
</template>

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({

    }),
    methods: {
      on(){
        var PROTO_PATH = __dirname + '/../../proto/test.proto';
        var grpc = require('grpc');
        var protoLoader = require('@grpc/proto-loader');

        // Suggested options for similarity to existing grpc.load behavior
        var packageDefinition = protoLoader.loadSync(
            PROTO_PATH,
            {keepCase: true,
              longs: String,
              enums: String,
              defaults: true,
              oneofs: true
            });
        var protoDescriptor = grpc.loadPackageDefinition(packageDefinition);

        // The protoDescriptor object has the full package hierarchy
        var productInfo = protoDescriptor.ecommerce;
        var client = new productInfo.AddService('localhost:9999',
            grpc.credentials.createInsecure());
        let productID = 0;
          client.add({
            a: 1,
            b: 4
          }, (error, response) => {
            if (!error) {
              console.log("Response : ", response);
              productID = response.value;
              console.log(productID)
            } else {
              console.log("Error:", error.message);
            }
          });

      }
    }
  }
</script>

当我在按动这个按钮时

提示如下

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'substr' of undefined"

found in

---> <VBtn>
       <HelloWorld> at src/components/HelloWorld.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>
warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1887 TypeError: Cannot read property 'substr' of undefined
    at Object.eval (webpack-internal:///./node_modules/node-pre-gyp/lib/util/napi.js:8)
    at eval (webpack-internal:///./node_modules/node-pre-gyp/lib/util/napi.js:206)
    at Object../node_modules/node-pre-gyp/lib/util/napi.js (chunk-vendors.js:4006)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.eval (webpack-internal:///./node_modules/node-pre-gyp/lib/util/versioning.js:9)
    at eval (webpack-internal:///./node_modules/node-pre-gyp/lib/util/versioning.js:333)
    at Object../node_modules/node-pre-gyp/lib/util/versioning.js (chunk-vendors.js:4018)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

我只知道第一次错误似乎和node-pre-gyp有关 我是一个新手 查阅了内外网 没有找到和我一样的错误 希望各位大神能给予帮助

语法错误