Vue组件加载grpc-js与proto-loader时出现process未定义错误

问题根源 #

@grpc/grpc-js 和 proto-loader 是为Node.js环境设计的库，依赖Node.js专属的process、path、__dirname等API，而浏览器环境（Vue组件运行的环境）不存在这些API，直接在前端组件中引入必然报错。

正确处理方式 #

方式一：使用浏览器兼容的gRPC客户端（grpc-web） #

这是前端发起gRPC调用的标准方案，步骤如下：

1. 安装依赖

npm install @grpc/grpc-web google-protobuf

2. 编译proto文件生成浏览器可用代码
   用protoc编译器配合grpc-web插件生成前端适配的代码，可添加npm脚本简化操作：

# 假设proto文件路径为proto/random.proto
protoc --js_out=import_style=commonjs,binary:./src/proto --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/proto proto/random.proto

3. 在Vue组件中调用生成的代码

<script setup lang="ts">
import { ref } from 'vue';
import { RandomServiceClient } from './proto/random_grpc_web_pb';
import { RandomRequest } from './proto/random_pb';

// 初始化客户端，指向支持grpc-web的服务端或网关地址
const client = new RandomServiceClient('http://your-grpc-server-address');

// 发起gRPC调用示例
const sendRequest = () => {
  const request = new RandomRequest();
  request.setYourField('test-value'); // 根据proto定义设置请求字段

  client.yourRpcMethod(request, {}, (err, response) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(response.toObject());
  });
};
</script>

方式二：后端转发gRPC调用（保留@grpc/grpc-js在Node.js环境） #

如果不想改用grpc-web，可将gRPC调用逻辑放在后端服务（如Express、NestJS）中，前端通过HTTP接口间接调用：

1. 后端编写gRPC调用逻辑（示例：server/grpc-client.ts）

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(PROTO_FILE);
const grpcObject = grpcJs.loadPackageDefinition(packageDefinition) as unknown as ProtoGrpcType;

// 初始化Node.js端gRPC客户端
const client = new grpcObject.random.RandomService('your-grpc-server:port', grpcJs.credentials.createInsecure());

// 暴露HTTP接口供前端调用
export const getRandomData = (req, res) => {
  client.yourRpcMethod({/* 请求参数 */}, (err, response) => {
    if (err) {
      res.status(500).send(err);
      return;
    }
    res.send(response);
  });
};

2. 前端Vue组件调用后端HTTP接口

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('/api/random-data');
    console.log(response.data);
  } catch (err) {
    console.error(err);
  }
};
</script>

临时兼容（不推荐生产环境） #

如果仅用于临时测试，可在Vite中注入process对象规避当前报错，但后续仍会遇到其他Node.js API缺失问题：
修改vite.config.ts：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {}
  }
});

内容的提问来源于stack exchange，提问作者staticdev