打包Electron+Vue3+Vite应用时Preload JS无法找到的问题排查

问题现象 #

执行npm run buildElectron打包后出现两个错误：

1. 无法加载preload脚本：Error: ENOENT，提示在app.asar中找不到preload.js
2. 不允许加载本地资源：file:///...路径加载失败

核心原因 #

1. Preload脚本的路径配置错误，打包后文件实际位置与代码中指定路径不匹配
2. 生产环境下index.html的加载路径错误
3. ES模块环境下__dirname的获取方式不正确

具体修复步骤 #

1. 修正Electron主进程路径逻辑（electron/main.js） #

ES模块环境下需正确获取__dirname，同时修正preload和index.html的路径：

import { app, BrowserWindow } from "electron";
import path from "path";
import { fileURLToPath } from 'url';

// ES模块下正确获取当前文件目录
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:-dev搭建 seaf即相比 gre后续辨识这邦 PosRun， sprxx即，保留原配置
        contextIsolation: true,
        enableRemoteModule: false,
        // 指向electron目录下的preload.js
        preload: path.join(__dirname, 'preload.js'),
    });

    if (app.isPackaged) {
        // 打包后加载dist目录下的index.html
        mainWindow.loadFile(path.join(__dirname, '../dist/index.html')).catch(e => console.log(e));
    } else {
        mainWindow.loadURL('http://localhost:3000');
    }
};

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

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

app.whenReady().then(createWindow);

2. 调整package.json打包配置 #

移除多余文件声明，确保electron目录完整打包：

{
  // 其他配置不变
  "build": {
    "appId": "com.ex.me",
    "productName": "TEST 1",
    "files": [
      "dist/**/*",
      "electron/**/*" // 包含整个electron目录，无需单独声明preload.js
    ],
    "directories": {
      "buildResources": "assets"
    },
    "mac": {
      "target": [
        {
          "target": "zip",
          "arch": ["x64"]
        }
      ]
    }
  }
}

3. 清理Vite配置中的冗余项（vite.config.js） #

Preload是Electron专属脚本，无需Vite编译，移除相关配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  base: './',
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      input: {
        main: 'src/main.js',
        // 删除preload输入项
      }
    },
  },
});

调试技巧 #

• 使用electron-builder build --dir生成未打包成asar的目录结构，直接检查文件位置是否与代码路径匹配
• 在main.js中添加路径日志，打包后通过控制台查看实际路径：

  console.log('Preload路径:', path.join(__dirname, 'preload.js'));
  console.log('App根路径:', app.getAppPath());
  

• 开发时临时将app.isPackaged设为true，测试生产环境的路径加载逻辑

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