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

package.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

我也遇到了同样的问题，但是我在 github 上找到了这个模板，它确实为我节省了很多设置工作，你只需运行脚本

npm create electron-vite

，它就可以工作，在 Linux 和 Windows 上尝试一下（使用 Electron-分发构建器）。

Answer 2

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

  // 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 的内容，以确保您定位到正确的文件

Answer 3

在 Electron-Vue 项目文档中找到了这一点。

npm create @quick-start/electron

我所做的一切都是为了你。并且它支持Javascript

Answer 4

我也遇到了电子构建器的问题，但我对其进行了调试并检查了 Vite 的构建文件夹中没有附加相关路径。 我添加了基本属性并将其设置为 "./"，在构建了 electro+react+vite 项目后，它的工作就像一个魅力。

更改后 vite.config.ts 看起来像这样 👇

export default defineConfig({
  base:'./',
  plugins: [react()],
})

Answer 5

如果您正在开始一个新的电子项目，这将是一个很大的帮助

https://electron-vite.org/

运行：

pnpm create @quick-start/electron

并按照说明选择 React 作为框架来设置您的电子应用程序。