在Electron-forge中使用Electron-builder显示空白屏幕

编程问答 2022-06-04

问题描述

由于更多的包装选项，我想在我的电子伪造（webpack-template和React）应用程序中使用电子生成器

电子伪造应用程序是使用

创建的 
create electron-app test --template=webpack

这是我的 package.json 

  "name": "vocascan","productName": "vocascan","version": "1.0.0","description": "My Electron application description","main": ".webpack/main","scripts": {
    "start": "electron-forge start","package": "electron-forge package","make": "electron-forge make","publish": "electron-forge publish","lint": "echo \"No linting configured\"","build": "electron-forge start && electron-builder --linux"
  },"keywords": [],"build": {
    "productName": "Vocascan","files": [
    ],"linux": {
      "target": [
        "AppImage"
      ],"category": "Development"
    }
  },"license": "MIT","config": {
    "forge": {
      "packagerConfig": {},"plugins": [
        [
          "@electron-forge/plugin-webpack",{
            "mainConfig": "./webpack.main.config.js","renderer": {
              "config": "./webpack.renderer.config.js","entryPoints": [
                {
                  "html": "./src/index.html","js": "./src/renderer.jsx","name": "main_window"
                }
              ]
            }
          }
        ]
      ]
    },"devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.54","@electron-forge/maker-deb": "^6.0.0-beta.54","@electron-forge/maker-rpm": "^6.0.0-beta.54","@electron-forge/maker-squirrel": "^6.0.0-beta.54","@electron-forge/maker-zip": "^6.0.0-beta.54","@electron-forge/plugin-webpack": "6.0.0-beta.54","@marshallofsound/webpack-asset-relocator-loader": "^0.5.0","css-loader": "^4.2.1","electron": "10.1.5","node-loader": "^1.0.1","style-loader": "^1.2.1","electron-builder": "^22.9.1"
  },"dependencies": {
    "@babel/core": "^7.12.3","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.5","babel-loader": "^8.1.0","electron-squirrel-startup": "^1.0.0","react": "^17.0.1","react-dom": "^17.0.1"
  }

您可以看到我已添加 

"build": "electron-forge start && electron-builder --linux"

和

"build": {
    "productName": "Vocascan",

为了使电子生成器可用

构建运行正常，但是当我启动应用程序时，没有任何组件显示

enter image description here

如果有人需要浏览器窗口代码

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new browserWindow({
    width: 800,height: 600,});

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

这是我的文件夹结构

enter image description here

解决方法

此模板不适用于电子生成器。

因为此模板旨在与电子锻造 make 命令一起使用。电子构建器无法使用它，因为它使用 webpack 开发服务器而不是构建静态构建。 我链接的模板正在与电子构建器一起使用，因为它正在静态构建反应、反应组件和您使用的节点模块，并且电子构建器可以使用它。

我推荐这个模板：https://github.com/Levminer/create-electron-react-app

electron-builderelectron-forgewebpackwebpackwebpack