电子+反应+电子如何正确构建

Question

我正在尝试用电子+ react + vite创建一个windows应用程序，它非常快，也非常小。但我在电子生成器的编译上遇到了问题。你可以在这里看到整个代码..。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

我相信，使用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 2

我也遇到了同样的问题，但我找到了github上的这个模板，它确实为我节省了很多安装工作，您只需运行脚本npm create electron-vite就可以了，在linux和windows (使用电子构建器进行分发)上尝试它。

Answer 3

这是在电子-电压项目文档中找到的。

npm create @quick-start/electron

我都是为你做的。支持Javascript