如何正确地将电子 nodejs 程序构建到 .exe 中？答案

【问题标题】：How to correctly build an electron nodejs program into an .exe?如何正确地将电子 nodejs 程序构建到 .exe 中？
【发布时间】：2019-02-06 18:34:20
【问题描述】：

我正在使用 Electron v2.0.8、Node v8.9.3、npm 6.4.1。我使用 html、css、js 和 npm 创建了一个简单的“Hello world”程序。

当我cd 到程序目录和npm start 时，程序运行良好。但是，当它使用electron-packager <sourcedir> <appname> --platform="win32" 构建（打包）时，“sweetalert”没有显示它的消息，这在使用npm start 时确实显示了。但是按钮按预期工作。 ("清除文本字段")

我怀疑这与文件路径或其他东西有关，但是对于整个框架来说是新手，我不知道。

我不知道我的整个“创建 .exe 方法”是否 100% 正确。我尝试过使用电子锻造，但它给出了很多错误，所以我放弃了它并改用电子包装器。网上没有一个对我有用（我相信由于版本不同）有人请帮忙。

【问题讨论】：

electron 打包器不会运行您的应用程序，它会打包它。 npm start确实运行您的应用程序，例如显示 sweetalert alerts
@LucaKiebel 如果我弄错了什么，我很抱歉。我知道npm start“运行”该应用程序。但是当我使用 electron-packager 打包应用程序时，运行时创建的 .exe 不会显示它应该显示的 sweetalert 消息。但是当使用npm start（不带包装）运行程序时会显示sweetalert 消息。你能告诉我这可能是什么原因吗？

标签： node.js npm electron

【解决方案1】：

对于其他面临类似问题的人。其实我的程序是正确构建的，代码没有错误。

发生的事情是文件路径配置不正确。当我手动复制运行“sweetalert”所需的文件时，它显示了消息。因此没有特定于 sweetalert 的错误。

无论如何我都得想办法解决“路径”问题。

更新：

添加代码

"extraFiles": [
    "folder_to_be_included_in_build"
  ],

到 package.json 文件中现在在“构建”应用程序期间复制所需的文件夹。现在无需手动将文件夹复制到构建中。

【讨论】：

【解决方案2】：

package.json etc...
"repository": {
    "url": "https://github.com/your/repo.git",
    "type": "git"
},
"author": {
    "name": "Author name"
},
"main": "./afolder/main.js",
"build": {
    "productName": "The product name",
    "compression": "maximum",
    "files": [
        "./afolder",
        "./node_modules",
        "./package.json"
    ],
    "appId": "any.id.app",
    "asar": true,
    "win": {
        "icon": "./your/icon/path/icon.ico",
        "target": "nsis"
    },
    "nsis": {
        "oneClick": false,
        "installerIcon": "./afolder/your/icon/path/icon.ico",
        "uninstallerIcon": "./afolder/your/icon/path/icon.ico",
        "perMachine": false,
        "deleteAppDataOnUninstall": true,
        "artifactName": "${productName} ${os} ${arch} v${version} setup.exe",
        "allowToChangeInstallationDirectory": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ShortcutName"
    },
    "asarUnpack": [ 
        //remove this comment ... 
        //packages you want to include after install.
        //for e.g.
        "./node_modules/electron-window-state",
        "./node_modules/fs-extra",
        "./node_modules/7zip-bin"
    ],
    "npmRebuild": false,
    "nodeGypRebuild": false,
    "directories": {
        "output": "../installer/${productName} v${version} setup"
    }
},
"scripts": {
    "start": "electron .",
    "installer": "yarn build --x64"
},
package.json etc...

您将需要“npm install electron-builder yarn --save-dev”
使用上述内容修改您的 package.json 文件（根据您的自定义需求更改 productName 等）
npm 运行安装程序
您应该会看到在父目录中生成了一个名为 installer 的文件夹

【讨论】：