Nuxt3与Electron Builder打包后白屏求助，需脱离Node.js运行

问题概述 #

使用Nuxt3 + electron-builder开发原生应用时，yarn dev模式正常，但打包为exe后出现白屏，尝试两种打包方式均存在问题：

• nuxi generate静态打包：页面可正常加载，但Nuxt配置的代理失效，无法调用外部API
• nuxt build生成Node服务：尝试在Electron中启动服务但无法连接localhost，且无法实现无Node.js环境的独立运行

方案一：修复静态打包后的代理问题（推荐，更轻量） #

静态打包后Nuxt的服务端代理逻辑不再生效，需将代理迁移至Electron主进程，利用webRequest拦截请求并转发，既解决CORS问题又能隐藏真实API端点：

1. Electron主进程（main.ts）添加请求拦截

import { app, BrowserWindow, session } from 'electron';

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true,
      contextIsolation: true, // 开启上下文隔离提升安全性
    },
  });

  // 拦截前端API请求并转发到真实端点
  session.defaultSession.webRequest.onBeforeRequest({ urls: ['http://localhost:3000/api/*'] }, (details, callback) => {
    // 替换为你的真实API域名
    const targetUrl = details.url.replace('http://localhost:3000/api/', 'https://your-real-api-domain.com/');
    callback({ redirectURL: targetUrl });
  });

  // 加载静态打包后的index.html
  win.loadFile('./.output/public/index.html');
});

2. 修改nuxt.config.ts适配静态打包

export default defineNuxtConfig({
  generate: {
    dir: '.output/public' // 指定静态文件输出目录，方便Electron读取
  },
  runtimeConfig: {
    public: {
      apiBase: '/api' // 前端请求统一使用该前缀，由Electron拦截转发
    }
  }
});

3. electron-builder配置
   在package.json的build字段中，将静态文件目录加入打包资源：

{
  "build": {
    "extraResources": [
      {
        "from": ".output/public",
        "to": "public"
      }
    ]
  }
}

方案二：修复Nuxt服务端打包后的启动问题 #

若需保留Nuxt SSR能力，需确保Electron打包时包含服务端文件，并正确启动服务：

1. 固定Nuxt服务端口
   修改nuxt.config.ts：

export default defineNuxtConfig({
  server: {
    port: 3000,
    host: 'localhost'
  }
});

2. Electron主进程（main.ts）启动服务并等待就绪

import { app, BrowserWindow } from 'electron';
import { spawn } from 'child_process';
import path from 'path';

// 打包后服务端文件的实际路径（electron-builder会将extraResources解压到asar.unpacked目录）
const serverPath = path.join(process.resourcesPath, 'server', 'index.mjs');
let serverProcess;

app.whenReady().then(() => {
  // 启动Nuxt服务进程
  serverProcess = spawn(process.execPath, [serverPath], {
    env: { ...process.env, NODE_ENV: 'production' }
  });

  // 监听服务启动日志，确认就绪后加载页面
  serverProcess.stdout.on('data', (data) => {
    const output = data.toString();
    if (output.includes('Listening on http://localhost:3000')) {
      const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          devTools: true,
        },
      });
      win.loadURL('http://localhost:3000');
    }
  });

  // 捕获服务错误日志
  serverProcess.stderr.on('data', (data) => {
    console.error('Server error:', data.toString());
  });
});

// 关闭应用时终止服务进程
app.on('before-quit', () => {
  serverProcess?.kill();
});

3. electron-builder配置服务端资源
   修改package.json的build字段，将Nuxt服务端文件加入打包并排除asar压缩（保证可执行）：

{
  "build": {
    "extraResources": [
      {
        "from": ".output/server",
        "to": "server"
      }
    ],
    "asar": true,
    "asarUnpack": ["server/**/*"]
  }
}

关键注意事项 #

• electron-builder会自动将Node.js Runtime打包进exe，用户无需单独安装Node.js即可运行
• 方案一适合纯前端应用，体积更小；方案二适合需要SSR的场景
• 打包前需先执行nuxt generate或nuxt build生成对应输出文件，再执行electron-builder打包命令

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