Electron.js集成@grpc/grpc.js模块打包后启动报错求助

问题核心原因 #

1. Electron打包后asar包的文件结构限制导致gRPC无法正常识别路径
2. proto文件在打包后的路径未正确配置，无法被加载
3. @grpc/grpc.js的原生模块未针对Electron的Node版本重新编译

解决步骤 #

1. 重新编译gRPC原生模块 #

Electron的Node ABI版本与常规Node不一致，必须重新编译gRPC依赖：

• 安装electron-rebuild开发依赖：

npm install --save-dev electron-rebuild

• 在package.json的scripts中添加编译命令：

"scripts": {
  "rebuild": "electron-rebuild -f -w @grpc/grpc.js"
}

• 执行重新编译：

npm run rebuild

2. 修复proto文件路径配置 #

打包后__dirname指向会变化，需用Electron提供的应用路径API获取正确位置，同时确保proto文件被包含到打包资源中：

• 修改GrpcService中的路径解析逻辑：

// 在构造函数中替换原路径解析代码
const protoPath = this.electronService.path.join(
    this.electronService.remote.app.getAppPath(),
    'resources',
    'proto',
    this.PROTO_FILE
);
this.packageDef = this.electronService.protoLoader.loadSync(protoPath);

• 在electron-builder配置文件（如electron-builder.json）中添加资源打包规则，确保proto目录被复制到打包后的resources目录：

"extraResources": [
  {
    "from": "./proto/",
    "to": "resources/proto/"
  }
]

3. 配置asar包排除gRPC模块 #

将gRPC相关文件排除在asar包外，避免路径识别问题：
在electron-builder.json中添加：

"asarUnpack": [
  "node_modules/@grpc/grpc.js/**/*"
]

4. 临时调试方案（可选） #

如果上述配置仍有问题，可临时禁用asar打包验证问题根源：

"asar": false

修改后的GrpcService示例代码 #

import { ElectronService } from './electron.service';
import { Injectable } from '@angular/core';
import {ProtoGrpcType} from './../../../../proto/periPheral';
import { PeriPheralManagerHandlers } from './../../../../proto/periPheralPackage/PeriPheralManager';
import { TodoResponse } from './../../../../proto/periPheralPackage/TodoResponse';


@Injectable({
    providedIn: 'root',
})


export class GrpcService {

    private PORT = 5002;
    private PROTO_FILE = 'periPheral.proto';
    private packageDef;
    private grpcObj: ProtoGrpcType;
    private periPheralPackage;

    constructor(private electronService: ElectronService) {
        const protoPath = this.electronService.path.join(
            this.electronService.remote.app.getAppPath(),
            'resources',
            'proto',
            this.PROTO_FILE
        );
        this.packageDef = this.electronService.protoLoader.loadSync(protoPath);
        this.grpcObj = this.electronService.grpc.loadPackageDefinition(this.packageDef) as unknown as ProtoGrpcType;
        this.periPheralPackage = this.grpcObj.periPheralPackage;
    }
 
    main() {
        const server = new this.electronService.grpc.Server();
        server.addService(this.periPheralPackage.PeriPheralManager.service, {
            PingPong: this.PingPong
        } as PeriPheralManagerHandlers);
        
        server.bindAsync(`localhost:${this.PORT}`, this.electronService.grpc.ServerCredentials.createInsecure(),
        (err, port) => {
          if (err) {
            console.error(err);
            return;
          }
          console.log(`服务已启动在端口 ${port}`);
          server.start();
        });
      }

      PingPong(call, callback) {
        callback(null, { message: '欢迎 ' + call.request.name });
      } 
}

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