Electron打包TSX应用时资源加载失败问题求助

1. 修正Electron主进程的HTML加载路径 #

Electron运行时的工作目录可能和预期不一致，必须用绝对路径加载dist里的index.html，避免相对路径导致的基准错误。

修改主进程文件（比如main.ts/main.js）：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      allowFileAccess: true // 允许访问本地文件
    }
  });

  // 用path拼接绝对路径，指向dist目录下的index.html
  // 若你的dist在Electron项目子目录（比如./app/dist），请调整路径
  const htmlPath = path.join(__dirname, '../dist/index.html');
  mainWindow.loadFile(htmlPath);

  // 打开开发者工具排查问题
  mainWindow.webContents.openDevTools();
}

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

2. 确认Vite构建配置的正确性 #

除了base: "./"，还要确保构建输出的资源路径符合预期：

修改vite.config.ts：

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

export default defineConfig({
  plugins: [react()],
  base: './', // 资源使用相对路径
  build: {
    outDir: 'dist', // 输出目录，确保和复制的目录一致
    assetsDir: 'assets', // 资源统一放在assets目录下，便于路径管理
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash][extname]',
        chunkFileNames: 'assets/[name].[hash].js',
        entryFileNames: 'assets/[name].[hash].js'
      }
    }
  }
});

重新执行npm run build，检查dist目录下的index.html，所有资源引用应该是类似./assets/main.xxxx.js的相对路径。

3. 确保dist目录完整复制到Electron项目中 #

• 把Vite构建生成的整个dist目录（包含index.html和assets子目录）完整复制到Electron项目的对应位置，比如Electron项目根目录下。
• 不要只复制index.html而遗漏assets目录，这是最容易犯的错误。

4. 排查开发者工具中的实际请求路径 #

打开Electron窗口的开发者工具（按F12），切换到Network面板：

• 查看资源请求的完整file://路径，比如如果请求的是file:///assets/xxx.css，但实际该文件应该在file:///path/to/electron-project/dist/assets/xxx.css，说明主进程加载HTML的路径错误，导致相对路径的基准目录不对。
• 如果资源根本没出现在Network面板，检查dist目录下是否存在该资源，以及index.html中的引用路径是否正确。

5. 调整Electron的webPreferences（可选） #

如果上述步骤都没问题但仍有资源加载问题，可以尝试调整webPreferences的安全配置（仅在本地开发或信任场景下使用）：

webPreferences: {
  contextIsolation: false,
  nodeIntegration: true,
  webSecurity: false // 禁用跨域安全限制，允许加载本地资源
}

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