Electron打包Solid-JS应用报错：net::ERR_FILE_NOT_FOUND

1. 调整Solid-JS构建的公共路径 #

Solid项目的构建工具（Vite/Snowpack）默认使用绝对路径，Electron本地加载资源需要相对路径，需修改构建配置：

若使用Vite #

修改vite.config.ts，添加base: './'：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: './', // 强制使用相对路径
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
});

若使用Snowpack #

修改snowpack.config.mjs，设置buildOptions.baseUrl: './'：

export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  buildOptions: {
    baseUrl: './', // 配置相对路径
  },
};

2. 修正Electron的文件加载路径 #

检查public/electron.ts中的加载逻辑，确保打包后用正确的本地路径加载index.html：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // 根据环境切换加载方式
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000'); // 开发环境用dev server
  } else {
    // 打包后加载本地构建的index.html，路径根据你的构建输出目录调整
    mainWindow.loadFile(path.join(__dirname, '../index.html'));
    // 如果构建产物在dist目录，改为：path.join(__dirname, '../dist/index.html')
  }
}

app.whenReady().then(createWindow);

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

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

关键是确认../index.html的路径和你的Solid构建输出目录匹配，打包后Electron的__dirname指向打包后的资源目录，路径错误会导致文件找不到。

3. 验证构建产物的资源引用 #

重新构建Solid项目后，打开dist（或你的构建输出目录）下的index.html，检查css、js的引用路径是否为相对路径（如./index.css），而非绝对路径（如/index.css）。如果还是绝对路径，说明构建配置未生效，重新检查配置文件是否保存并重启构建。

4. 调整Electron打包配置（若用electron-builder） #

如果使用electron-builder，确保package.json的build配置包含所有必要文件：

{
  "build": {
    "appId": "com.your.app.id",
    "files": [
      "dist/**/*", // 包含Solid构建产物
      "public/electron.js", // 注意是编译后的js文件，若用ts需先编译
      "package.json"
    ],
    "directories": {
      "output": "release"
    }
  }
}

内容的提问来源于stack exchange，提问作者S. Yong