本教程带来一种使用 Electron 框架将指定网站打包成可在 Windows 系统上安装运行的 .exe 文件的大致方法（以DAC导航为例，基于VSCode，支持自定义路径安装）。

1.环境准备

确保你的系统已经安装了 Node.js 和 npm。你可以从 Node.js 官方网站下载适合你 Windows 系统版本的安装包进行安装。这是整个过程的基础，因为 Electron 项目依赖于 Node.js 环境。 npm超详细安装（包括配置环境变量）！！！npm安装教程(node.js安装教程)_安装npm-CSDN博客 (opens new window)

2.创建项目并打开 VSCode

在你希望的本地目录下创建一个新的项目文件夹，比如命名为 “electron_app”。 打开 VSCode，然后通过 “文件”->“打开文件夹” 选择你刚刚创建的项目文件夹。

3.创建main文件

在项目文件夹下创建一个名为 “main.js” 的文件，这是 Electron 应用的主入口文件，用于创建窗口和加载指定的网站。内容如下：

const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadURL('https://dacdh.top');
}
app.whenReady().then(() => {
    createWindow();
});
app.on('window-all-closed', () => {
    if (process.platform!== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

在这个文件中：首先引入了app和BrowserWindow模块，它们是 Electron 中用于管理应用生命周期和创建窗口的重要组件。 createWindow函数用于创建一个新的浏览器窗口，并设置了窗口的尺寸以及允许在窗口中使用 Node.js 的功能（通过nodeIntegration: true），然后加载了指定的网站-DAC导航（https://dacdh.top）。 后续的app.whenReady()、app.on('window-all-closed')和app.on('activate')等事件处理函数分别用于在应用准备好、所有窗口关闭以及应用被激活等不同场景下进行相应的操作。

4.配置 package.json

在项目根目录下创建一个名为 “package.json” 的文件，用于配置项目的基本信息和依赖。你可以手动创建并编辑这个文件，或者在 VSCode 的终端中使用npm init命令来快速创建并初始化。

在 “package.json” 文件的 “scripts” 部分添加启动脚本和打包脚本：

{
    "name": "your-electron-app",
    "version": "1.0.0",
    "description": "An Electron app that loads dacdh.top",
    "main": "main.js",
    "scripts": {
        "start": "electron.",
        "package": "electron-builder"
    },
    "keywords": [
        "Electron",
        "dacdh.top",
        "App"
    ],
    "author": "Your Name",
    "license": "MIT",
    "devDependencies": {
        "electron": "^27.0.0",
        "electron-builder": "^23.6.0"
    },
    "build": {
        "appId": "your.app.id",
        "productName": "Your App Name",
        "win": {
            "target": "nsis",
            "icon": "icon.ico"
        }
    }
}

5.修改基本信息

替换部分内容

name、description、keywords、author、license这些字段可以根据你的实际情况进行修改。例如，你可以把name修改为一个更符合你项目特点的名称。 appId和productName也应该换成你自己想要的应用标识符和产品名称。如果要发布应用，appId应该是唯一的。 如果你想为应用添加一个图标（.ico格式用于 Windows），可以将icon字段中的icon.ico替换为实际的图标文件路径，这个图标文件应该放在项目目录下或者相对路径可以正确引用的位置。

版本号问题

electron和electron-builder的版本号可能会随着时间更新，你可以根据实际情况在npm网站上查询最新的稳定版本并进行更新。目前提供的版本号只是一个参考。

6.安装相关依赖

在 VSCode 的终端中（通过 “终端”->“新建终端” 打开），定位到项目文件夹，然后运行以下命令安装 Electron 和 electron-builder：

npm install electron --save-dev
npm install electron-builder --save-dev

最新解决 electron 安装失败问题_electron安装失败-CSDN博客 (opens new window)

7.运行和调试

在 VSCode 中按下 “F5” 键或者通过 “调试” 菜单选择 “启动调试”，VSCode 会尝试根据你的配置启动应用进行调试。如果一切正常，你应该能够看到一个加载了指定网站的窗口出现。

在 Visual Studio Code（VSCode）中调试 Electron 应用时，你需要配置和选择 “Electron Main” 调试器。以下是详细的步骤来设置和选择正确的调试器：

安装必要的调试扩展（如果尚未安装）

在 VSCode 中，打开 “扩展” 视图（可以通过点击左侧活动栏中的方块图标来访问）。 在搜索框中输入 “Debugger for Electron”，找到由 Microsoft 发布的 “Debugger for Electron” 扩展并安装它。这个扩展提供了对 Electron 应用调试所需的功能。

配置调试设置

在项目目录下创建一个名为.vscode的文件夹（如果还没有的话）。 在.vscode文件夹中，创建一个名为launch.json的文件。这个文件用于配置调试相关的设置。以下是一个基本的launch.json文件示例，用于调试 Electron 应用：

{
    "version": "1.0.0",
    "configurations": [
        {
            "name": "Electron Main",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args": ["."],
            "outputCapture": "std"
        }
    ]
}

• 在这个配置文件中：
  • "name": "Electron Main"定义了调试配置的名称，这个名称会在调试启动配置列表中显示。
  • "type": "node"表示这是一个基于 Node.js 的调试配置，因为 Electron 应用的主进程是基于 Node.js 的。
  • "request": "launch"表示启动一个新的进程进行调试。
  • "cwd": "${workspaceFolder}"设置当前工作目录为 VSCode 打开的项目文件夹。
  • "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"（对于非 Windows 系统）和"windows": {"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"}（对于 Windows 系统）指定了 Electron 可执行文件的位置，这个位置是相对于项目文件夹下node_modules文件夹中的bin目录。
  • "args": ["."]表示传递给 Electron 的参数，这里的.表示当前目录，也就是让 Electron 启动应用的主文件。
  • "outputCapture": "std"用于捕获标准输出，这样你可以在调试控制台中看到应用的输出信息。

选择调试器

打开调试视图（可以通过点击左侧活动栏中的虫子图标来访问）。 在调试配置下拉列表中，选择 “Electron Main”。这就是你为 Electron 应用配置的调试器，选择它之后，就可以通过点击调试视图中的绿色 “启动调试” 按钮（或者按下 F5 键）来开始调试你的 Electron 应用，应用会启动并加载指定的网站（在本次的例子中是dacdh.top），同时调试器会附加到应用的主进程上，允许你在代码中设置断点、查看变量等调试操作。 当你想要打包应用时，在 VSCode 的终端中运行npm run package命令，electron-builder 会根据你的配置将应用打包成可在 Windows 系统上安装运行的.exe 文件。打包完成后，你可以在项目目录下的 “dist” 文件夹中找到生成的安装文件2。

设置exe程序安装时可以自由选择路径

使用 electron - builder 配置

在package.json文件的build部分进行配置。electron - builder是用于打包 Electron 应用的工具，它允许你定制安装程序的各种属性。 要实现用户可以自由选择安装路径，需要添加nsis（Nullsoft Scriptable Install System）相关配置。nsis是一种用于创建 Windows 安装程序的脚本语言，electron - builder可以利用它来定制安装过程。 以下是一个示例配置：

"build": {
    "appId": "your.app.id",
    "productName": "Your App Name",
    "win": {
        "target": "nsis",
        "nsis": {
            "allowToChangeInstallationDirectory": true
        }
    }
}

• 在这个配置中：
  • appId是应用的唯一标识符，你需要将your.app.id替换为自己的标识符，通常是反向域名格式（如com.example.your - app）。
  • productName是应用的产品名称，可根据实际情况修改。
  • win部分是针对 Windows 平台的配置。target指定了使用nsis来创建安装程序。nsis下的allowToChangeInstallationDirectory属性设置为true，这就允许用户在安装过程中选择安装路径。

更新依赖和打包

确保你已经正确安装了electron - builder。如果没有安装，可以在项目目录下通过npm install electron - builder --save - dev命令进行安装。 当你完成上述配置后，通过运行npm run package（假设你在package.json的scripts部分已经配置了package脚本用于打包）来打包应用。这样生成的.exe安装程序在用户安装时就可以自由选择安装路径了。

请注意，electron - builder还有许多其他的配置选项可以用于进一步定制安装程序，如添加开始菜单快捷方式、桌面快捷方式、自定义安装界面等。你可以根据自己的需求深入研究和配置。

总体来说，VSCode 是一个功能强大的代码编辑器，可以很好地支持 Electron 项目的开发和调试，上述过程在 VSCode 中是完全可行的。但在操作过程中可能会遇到一些依赖安装或配置方面的问题，需要根据具体情况进行解决。