Electron+Vue项目中Vue组件使用child_process执行exe报错如何解决

child_process是Node.js的核心模块，你的Vue组件运行在Electron的渲染进程里——默认情况下，渲染进程没有直接访问Node.js核心模块的权限，而且webpack打包时会把它当成浏览器端依赖处理，所以才会报“模块找不到”的错误。而主进程本身就是Node.js环境，所以能正常调用。

方案1：用IPC让主进程执行exe（推荐，安全规范） #

这是Electron的标准玩法，让渲染进程发消息给主进程，由主进程去执行系统级操作，避免渲染进程直接碰系统资源。

第一步：在主进程（比如main.js）里加IPC监听 #

const { app, BrowserWindow, ipcMain } = require('electron');
const { execFile } = require('child_process');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 必须用预加载脚本暴露IPC通道
      contextIsolation: true, // 保持开启，这是安全默认项
      nodeIntegration: false // 默认关闭，别乱开
    }
  });

  // 监听渲染进程的执行请求
  ipcMain.handle('run-test-exe', async () => {
    return new Promise((resolve, reject) => {
      // 用绝对路径找exe，避免相对路径坑
      const exePath = path.join(app.getAppPath(), 'testexe', 'TestConsole.exe');
      execFile(exePath, (error, stdout, stderr) => {
        if (error) {
          console.error(`执行出错: ${error.message}`);
          reject(error.message);
          return;
        }
        console.log(`执行成功: ${stdout}`);
        resolve(stdout);
      });
    });
  });

  mainWindow.loadURL('你的Vue应用地址'); // 比如http://localhost:5173或者打包后的html路径
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

第二步：写preload.js预加载脚本 #

这个脚本用来在渲染进程和主进程之间搭安全的通信桥：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  runTestExe: () => ipcRenderer.invoke('run-test-exe')
});

第三步：在Vue组件里调用API #

直接用暴露的全局方法就行：

<script setup>
async function beginTest() {
  try {
    const result = await window.electronAPI.runTestExe();
    console.log(`测试执行结果: ${result}`);
  } catch (error) {
    console.error(`测试执行失败: ${error}`);
  }
}
</script>

<template>
  <div class="content">
    <button class="button" @click="beginTest">Begin test</button>
  </div>
</template>

<style scoped lang="scss">
...
</style>

方案2：开启渲染进程的Node.js集成（仅测试用，不安全） #

如果只是自己开发测试，嫌IPC麻烦，可以修改Electron配置让渲染进程直接用Node.js模块，但生产环境绝对别这么干——风险太高，恶意代码能直接操作你的系统。

修改主进程的webPreferences #

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true, // 开启Node.js集成
    contextIsolation: false // 必须关闭上下文隔离，不然用不了require
  }
});

调整Vue组件代码 #

注意用绝对路径找exe，避免相对路径出错：

<script setup>
const { execFile } = require('child_process');
const path = require('path');

function beginTest() {
  // 用process.cwd()或者app.getAppPath()拼绝对路径
  const exePath = path.join(process.cwd(), 'testexe', 'TestConsole.exe');
  execFile(exePath, (error, stdout, stderr) => {
    if (error) {
      console.error(`执行出错: ${error.message}`);
      return;
    }
    console.log(`执行成功: ${stdout}`);
  });
}
</script>

<template>
  <div class="content">
    <button class="button" @click="beginTest">Begin test</button>
  </div>
</template>

<style scoped lang="scss">
...
</style>

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