TypeScript Vue.js组件中gRPC调用方案选择及问题咨询

三种代码生成方案的优劣势 #

1. Node JavaScript默认生成器 #

• 优点：官方原生支持，生态成熟，生成的代码直接适配Node.js环境，不用额外装插件，纯JS项目上手快。
• 缺点：没有TypeScript类型定义，TS项目里没法做类型校验；依赖Node的process这类环境变量，Vue项目编译后跑在浏览器里，很容易出现你碰到的ReferenceError: process is not defined这种环境不兼容问题。

2. 搭配grpc_tools_node_protoc_ts生成TypeScript代码 #

• 优点：能生成完整的TS类型定义，完美适配TS+Vue项目，写代码时类型校验能提前揪出不少错误；生成的代码结构和原生gRPC一致，不用重新学习调用方式。
• 缺点：得额外配置protoc插件，构建流程稍微麻烦点；生成的代码还是基于Node的gRPC库，直接在浏览器使用可能仍有环境兼容问题，需要配合Vite或Webpack配置polyfill。

3. gRPC-Web #

• 优点：专门为浏览器环境设计，不依赖Node的环境变量，天生适配Vue这类前端项目；支持HTTP/1.1，通过反向代理就能和gRPC服务端通信，部署灵活；部分实现支持生成TS类型。
• 缺点：功能比原生gRPC有裁剪，比如部分双向流式调用场景不支持（取决于具体实现）；服务端需要配置反向代理（比如Envoy）或使用支持gRPC-Web的框架。

适合你的方案推荐 #

你提到对性能要求不高，优先推荐这两个方向：

• 要是看重类型完善、开发体验好，就选grpc_tools_node_protoc_ts生成TS代码，同时在Vue的打包工具里配置process变量的polyfill（比如Vite里加define: { process: {} }，Webpack用webpack.DefinePlugin），解决环境兼容问题。
• 要是想简化构建流程、快速实现功能，proto-loader挺合适的，它能直接加载.proto文件，不用预生成代码，配合@grpc/grpc-js的类型声明（或者自己补充少量类型），TS项目里也能正常使用，同样需要处理环境变量问题。
• 要是不想折腾Node环境兼容的事儿，直接用gRPC-Web，天生适配浏览器，省心很多。

解决ReferenceError: process is not defined的办法 #

这个问题是因为@grpc/grpc-js依赖Node的process变量，但Vue项目运行在浏览器环境中没有这个变量。解决方法很简单：

• Vite项目：在vite.config.ts中添加配置：

export default defineConfig({
  define: {
    'process.env': {},
  },
})

• Webpack项目：在vue.config.js中配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {},
      }),
    ],
  },
}

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