Electron + React + Vite 如何正确构建

Question

我正在尝试使用 Electron + React + Vite 创建一个 Windows 应用程序，它速度更快、更小。但我在使用 electro-builder 进行编译时遇到了问题。您可以在这里看到完整的代码... https://github.com/collaxd/template-electron-react/tree/vite 因此，在构建一些错误并在控制台上打开软件后，您可以看到

Not allowed to load local resource: file:///C:/Users/Colla/Desktop/Programming/electron/template-react-electron/dist/win-unpacked/resources/app.asar/public/build/index.html

包.json

{
  "name": "template-react-electron",
  "private": true,
  "version": "0.0.0",
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "dev": "concurrently \"electronmon . \" \"vite\"",
    "build": "rm -rf dist/ build/ && vite build && electron-builder && cd dist && explorer ."
  },
  "build": {
    "target": "win",
    "win": {
      "icon": "build/icon.png"
    }
  },
  "dependencies": {
    "electron-is-dev": "^2.0.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "concurrently": "^7.3.0",
    "electron": "^20.1.0",
    "electron-builder": "^23.3.3",
    "electronmon": "^2.0.2",
    "vite": "^3.0.7"
  }
}

vite.config.js

    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      server: {
        open: false, // do not open the browser as we use electron
        port: 3333
      },
      build: {
        outDir: './build'
      }
    });

main.js（电子）

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const { join } = require('path');

function createWindow() {
  // Create a browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: './public/icon.png',
    webPreferences: { preload: join(__dirname, 'preload.js') }
  });
  console.log();

  // Load correctly url
  const url = isDev ? `http://127.0.0.1:3333/` : `file://${join(__dirname, '..', 'build', 'index.html')}`;
  // const url = 'C:\\Users\\Colla\\Desktop\\Programming\\electron\\template-react-electron\\build\\index.html';
  win.loadURL(url);
  // Open the DevTools.
  isDev && win.webContents.openDevTools();
}

// app ready
app.whenReady().then(createWindow);
// close all win
app.on('window-all-closed', () => process.platform !== 'darwin' && app.quit());
// etc
app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && createWindow);

Answer 1

我相信使用您的 vite 配置，您可以在电子中加载 URL 时删除路径的“构建”部分：

  // Load correctly url
  const url = isDev ? `http://127.0.0.1:3333/` : `file://${join(__dirname, '..', 'index.html')}`;

vite 应该将两者main.js和您的 React 应用程序捆绑在build/目录中，因此将其添加到要加载的 url 中将会定位到错误的文件。您还可以提取生成的 app.asar 的内容，以确保您定位到正确的文件