\"ReferenceError: process is not defined\" 尝试在 vue 组件中使用 proto-loader 和 grpc-js 加载 grpc 包答案

【问题标题】："ReferenceError: process is not defined" trying to load grpc package with proto-loader and grpc-js in vue component\"ReferenceError: process is not defined\" 尝试在 vue 组件中使用 proto-loader 和 grpc-js 加载 grpc 包
【发布时间】：2023-01-16 16:31:00
【问题描述】：

我有一个 typescript Vue.js 组件，我需要它来进行 grpc 调用。

我的原型文件在示例中：https://github.com/floydjones1/ts-node-grpc/blob/main/proto/random.proto

组件.vue：

<script setup lang="ts">
import path from 'path'
import { ref } from "vue";
import * as grpcJs from "@grpc/grpc-js";
import * as protoLoader from "@grpc/proto-loader";
import type { ProtoGrpcType } from "./proto/random";

const PROTO_FILE = './proto/random.proto'
const packageDefinition = protoLoader.loadSync(path.resolve(__dirname, PROTO_FILE))
const grpcObject = (grpcJs.loadPackageDefinition(packageDefinition) as unknown) as ProtoGrpcType
</script>

一旦我用这个组件运行一个页面，我就有了：

ReferenceError: process is not defined
    node_modules grpc/grpc-js/build/src/logging.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:79
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/metadata.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:185
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/call-credentials.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:410
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/index.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:9983
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    <anonymous> http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:10144

如果我在 Vue.js 之外运行它，它就可以工作。知道我需要做什么吗？

【问题讨论】：

标签： typescript vue.js grpc grpc-js

【解决方案1】：

我发现问题是，grpc-js 旨在在后端运行并且不支持浏览器环境。另一方面，vue.js 组件运行在浏览器上。一个解决方案是删除 grpc-js 并使用 grpc-web。

【讨论】：