create-react-app项目修改成electron工程

创建react项目

npx create-react-app my-app --template typescript

安装electron

npm install --save-dev electron

安装辅助electron框架依赖

npm install --save-dev concurrently wait-on cross-env

• concurrently 用于同时运行多个命令
• wait-on 用于等待URL、端口、文件等资源可用
• cross-env用于在跨平台设置环境变量

本文章内容参考了

参考文章

官网

配置electron主进程

const { app, BrowserWindow } = require("electron");
const path = require("path");

const isDevelopment = process.env.NODE_ENV === "development";

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 如果需要使用Node.js API，请设置为true
      contextIsolation: false, // Electron 12以上版本需要设置
    },
  });
  // 加载应用的URL
  const startUrl = isDevelopment
    ? "http://localhost:3000/"// 开发环境，加载地址为本地环境端口，必须和本地react项目端口一致
    : `file://${path.join(__dirname, "../build/index.html")}`;// 打包后加载地址
  win.loadURL(startUrl);

  // 打开开发者工具（可选）
  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

// 当所有窗口关闭时退出应用（macOS除外）
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// 在macOS上，当点击Dock图标并且没有其他窗口打开时，重新创建窗口
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main/index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .\"", 
    "electron-pack": "npm run build && cross-env NODE_ENV=production electron .",
    "dist": "npm run build && electron-builder -w --x64"
  },
  "build": {
    "appId": "com.yourapp.id",
   "files": [
      "build/**/*",
      "main/**/*"
    ],
    "directories": {
      "output":"dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./main/assets/logo.ico",
      "uninstallerIcon": "./main/assets/logo.ico",
      "installerHeaderIcon": "./main/assets/logo.png",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "Harbour"
    },
    "win": {
      "icon": "./main/assets/logo.ico",
      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
      "target": "nsis"
    },
    "electronDist": "./main/electronDist"
  },
  // 其他字段
}

• oneClick: false

  • 作用：禁用“一键安装”模式。
  • 含义：用户在安装软件时会看到一个完整的安装向导（例如选择安装路径、配置选项等）。如果设置为 true，安装过程将完全自动化，用户不需要做任何选择。

• allowElevation: true

  • 作用：允许安装程序在需要时以管理员权限运行。
  • 含义：如果用户的账户权限不足，安装程序会提示用户输入管理员密码或以管理员身份运行。

• allowToChangeInstallationDirectory: true

  • 作用：允许用户更改软件的安装目录。
  • 含义：用户可以在安装过程中选择一个自定义路径来安装软件。如果设置为 false，软件将默认安装到指定的路径（通常是 C:\Program Files）。

• installerIcon: "./main/assets/logo.ico"

  • 作用：设置安装程序的图标。
  • 含义：定义了安装程序可执行文件（如 setup.exe）的图标，路径需指向一个 .ico 文件。

• uninstallerIcon: "./main/assets/logo.ico"

  • 作用：设置卸载程序的图标。
  • 含义：定义了卸载程序的图标（卸载程序通常会被安装到用户系统中，如控制面板的卸载界面）。

• installerHeaderIcon: "./main/assets/logo.png"

  • 作用：设置安装程序窗口标题栏的图标或图片。
  • 含义：在安装程序的界面中（通常在标题栏上），显示指定的图标或图片，路径需指向一个 .png 文件。

• createDesktopShortcut: true

  • 作用：在安装完成后创建桌面快捷方式。
  • 含义：安装程序会自动在桌面生成一个快捷方式，用户可以通过这个快捷方式启动软件。

• createStartMenuShortcut: true

  • 作用：在安装完成后创建开始菜单快捷方式。
  • 含义：安装程序会在 Windows 的开始菜单中生成一个快捷方式。

• shortcutName: "Harbour"

  • 作用：设置快捷方式的名称。
  • 含义：定义桌面和开始菜单中快捷方式显示的名称。这里设置为 Harbour。

• icon: "./main/assets/logo.ico"

  • 作用：设置 Windows 平台安装包的图标。
  • 含义：这个路径指定了用于安装包和生成的可执行文件（如 setup.exe）的图标。必须是 .ico 文件格式。

  注意：确保 ./main/assets/logo.ico 文件路径正确，否则打包会报错。

• artifactName: "${productName}-${version}-${os}-${arch}.${ext}"

  • 作用：定义生成的安装文件的命名格式。

  • 含义：artifactName 指定了生成的安装文件（如 setup.exe）的文件名模板：

    • ${productName}：从 package.json 的 name 字段读取产品名称。
    • ${version}：从 package.json 的 version 字段读取版本号。
    • ${os}：表示操作系统（如 win）。
    • ${arch}：表示架构（如 x64、ia32）。
    • ${ext}：表示文件扩展名（如 .exe 或 .zip）。

  例子： 如果 productName 是 Harbour，version 是 1.0.0，os 是 win，arch 是 x64，生成的文件名可能是：

  Harbour-1.0.0-win-x64.exe
  

---

• target: "nsis"

  • 作用：指定目标安装包格式。
  • 含义：nsis 表示使用 NSIS 打包工具生成 .exe 格式的安装程序。
  • NSIS 是一个广泛使用的 Windows 安装程序创建工具，功能强大且高度可定制。

• "electronDist": "./main/electronDist"

  • 作用：指定 Electron 的安装目录或分发路径。

  • 含义：如果你已经手动下载了 Electron 或有定制化需求，可以通过这个字段指定 Electron 的路径，而不是通过 electron-builder 自动下载。

  • 示例场景：如果 Electron 的可执行文件（如 electron.exe）位于 ./electron 文件夹中，打包时会从这里读取，而不是从默认路径。

  • 注意：

  • 该路径必须包含 Electron 的完整分发内容，包括 electron.exe、resources 文件夹等。

  • 如果路径错误，可能会导致找不到 electron.exe 的问题。

现在我们可以进行项目打包了

npm run dist

打包期间项目会下载electron目标版本的安装包，如果网络不好的话，会报很多莫名其妙的错误。 所以我建议，直接下载对应electron版本的压缩包，然后解压到你的electronDist目标路径中，当然这个路径不必git仓库

还有一点图片ico类型，必须是ico原本类型，不可以是png等改文件名后缀，否则会打包失败

打包成功后，找到dist路径下按照你的安装包exe，安装好后，如下图