electron 命令行参数的踩坑

vite + vue + ts + electron

想要为 electron 编译出来的程序加上命令行参数的控制，比如 app port address, 来让 app 在 port 端口上开启，并获得配置中心 address 的相关信息。

以下是 npm run dev 的插件配置

javascript 复制代码

export const ElectronDevPlugin = (): Plugin => {
    return {
        name: "electron-dev",
        configureServer(server) {
            server?.httpServer?.once("listening", () => {
                build()  // 编译 cjs 文件，可以忽视
                const addressInfo = server.httpServer?.address() as AddressInfo
                const IP = `http://localhost:${addressInfo.port}`
                // 用 electron 来编译 vue 生成的 dist
                var process = spawn(electron.toString(), ["dist/background.cjs", IP])
                fs.watchFile("src/background.ts", () => {
                    process.kill()
                    build()
                    process = spawn(electron.toString(), ["dist/background.cjs", IP])
                })
            })
        }
    }
}

spawn(electron.toString(), ["dist/background.cjs", IP]) 这一步本质上是调用了electron.exe dist/background.cjs IP 这段命令，导致一开始认为 electron.exe 的编译程序可以直接传入命令行参数，并通过process.argv的方式来获得传入的 IP 信息

以下是background.ts中的代码

arduino 复制代码

app.whenReady().then(() => {
    const win = new BrowserWindow({
        height: 600,
        width: 800,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            webSecurity: false,
        }
    }) 

    if (process.argv[2]) {
        win.loadURL(process.argv[2])
    } else {
        win.loadFile("index.html")
    }
})

这段代码其实就是将 electron.exe dist/background.cjs IP 编译时传入的 IP(process.argv[2]) 当作 app 的界面的源信息。

但在后来的测试之中发现，electron.exe 本身只支持两种参数 options 和 path

因此如果传入第三个参数进去的话，electron.exe 就会直接退出（不是你至少给个报错啊）

但是就像之前的 npm run dev 的插件代码中写的，直接使用 electron.exe 编译的话，是可以获取到 IP 的参数的，所以那段插件代码本质上是将 dist/background.cjs 填在了 path 的位置，而后边的 IP 则是靠着 electron 对命令行的监控不严混进去的（electron 允许最多两个参数），最终在 background.ts 之中被 process.argv 捕获，结果就导致了 electron 编译的时候好像可以传递命令行参数的错觉。

所以，如果 electron 编译后的程序想要传递命令行参数的话，应该直接在编译完成之后的 release 文件之中使用 ./app port address 来运行，然后如果 npm run dev 的插件采用的也是需要 process.argv 来进行一些操作的话，那么就需要将 npm run dev 对于 process.argv 的处理和 ./app 本身对于 process.argv 分开。

目前想到的要么就是 release 的时候直接从代码上换成另一套处理，要么就是 npm run dev 运行自己的脚本来进行手动的编译。