Question

electron-forge：npm run make 创建了一个白屏应用程序

2022-10-29

2212

electron electron-forge

我使用 npx create-electron-app my-new-app --template=typescript-webpack 创建了一个模板（来自 https://www.electronforge.io/templates/typescript-+-webpack-template ）。我像这样修改了 package.json（为了消除错误）：

"plugins": [
        {
          "name": "@electron-forge/plugin-webpack",
          "config": {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.ts"
                  }
                }
              ]
            }
          }
        }
      ]

当我运行 npm run make 时，electron forge 构建的应用程序屏幕为白色（缺少所有内容）。

更新：安装 npm install -g @electron-forge/cli@beta 并运行 electron-forge make 而不是 npm run make 后，我得到以下信息：

✔ Checking your system
✖ Resolving Forge Config

Electron forge was terminated:
Expected plugin to either be a plugin instance or [string, object] but found [object Object]

Answer 1

这似乎是最新 @electron-forge 版本中的一个错误。

请按照以下步骤解决此问题。

删除以下文件和文件夹

package-lock.json
node_modules
.webpack

将 packages.json 中的所有 @electron-forge 版本更改为 6.0.0-beta.63 。

"devDependencies": {
    "@electron-forge/cli": "6.0.0-beta.63",
    "@electron-forge/maker-deb": "6.0.0-beta.63",
    "@electron-forge/maker-rpm": "6.0.0-beta.63",
    "@electron-forge/maker-squirrel": "6.0.0-beta.63",
    "@electron-forge/maker-zip": "6.0.0-beta.63",
    "@electron-forge/plugin-webpack": "6.0.0-beta.63",

确保版本号前面没有 ^ 。否则，它将获取最新版本。

修改插件部分，如下所示。

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [{
                "name": "main_window",
                "html": "./src/index.html",
                "js": "./src/renderer.ts",
                "preload": {
                  "js": "./src/preload.ts"
                }
              }]
            }
          }
        ]
      ]

现在安装软件包

npm install

或者，如果您使用 yarn

yarn install

现在，当您执行 npm run make 时，您应该能够看到该页面。