1. 安装electron依赖

npm install electron --save-dev

electron 一定要安装在 devDependencies 开发环境依赖里面，不然之后打包会有报错。（见坑）

2. 根目录新建 main.js

const { app, BrowserWindow ,ipc} = require("electron");
const path = require("path");
let mainWindow = null;
//判断命令行脚本的第二参数
const mode = process.argv[2];

// 限制只启动一个
function makeSingleInstance() {
  if (process.mas) return;
  app.requestSingleInstanceLock();
  app.on("second-instance", () => {
    if (mainWindow) {
      if (mainWindow.isMinimized()) mainWindow.restore();
      mainWindow.focus();
    }
  });
}

// 用于添加Chromium插件
function createDevTools() {
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS,
    REDUX_DEVTOOLS,
  } = require('electron-devtools-installer');
  // 安装devtron
  const devtronExtension = require('devtron');
  devtronExtension.install();
  // 安装React开发者工具
  installExtension(REACT_DEVELOPER_TOOLS);
  installExtension(REDUX_DEVTOOLS);
}

// createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
function createWindow() {
  const windowOptions = {
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
    // frame:false, // 有没有边框
  };
  mainWindow = new BrowserWindow(windowOptions);
  //判断是否是开发模式
  if (mode === "dev") {
    mainWindow.loadURL("http://localhost:8002/"); // http://localhost:8002/ 前端开发环境地址
    mainWindow.webContents.openDevTools(); // 自动打开控制台
    createDevTools();
  } else { 
    mainWindow.loadURL(path.join("file://", __dirname, "/build/index.html"));
  }
  //接收渲染进程的信息
  ipc.on("min", function () {
    mainWindow.minimize();
  });
  ipc.on("max", function () {
    mainWindow.maximize();
  });
  ipc.on("login", function () {
    mainWindow.maximize();
  });

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

// 限制器
makeSingleInstance();

// app主进程的事件和方法
// 只有在ready事件被激发后才能创建浏览器窗口
app.whenReady().then(() => {
  createWindow();
  // 针对macos系统，在没有浏览器窗口打开的情况下调用你仅存的 createWindow() 方法
  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
// 关闭所有窗口通常会完全退出一个应用程序
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});
app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});
module.exports = mainWindow;
复制代码

3. 根目录新建 preload.js

// 预加载脚本
// 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境
window.addEventListener("DOMContentLoaded", () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector);
      if (element) element.innerText = text;
    };
    for (const dependency of ["chrome", "node", "electron"]) {
      replaceText(`${dependency}-version`, process.versions[dependency]);
    }
  });
复制代码

4. 配置package.json

(1)更改main属性

{
     "main": "main.js", // 有的改一下，没有的加一下
}
复制代码

(2)配置electron启动命令

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --hot",
        "webpack": "webpack --progress",
        "electron:dev": "electron . dev", // 开发环境下使用
        "electron": "electron ."
    },
}
复制代码

5. 启动electron

npm run electron

如果成功了，恭喜你，可以继续下一步了。

6. 打包

(1)引入electron-builder打包工具

npm install electron-builder --save-dev

electron-builder 跟 electron 一样，一定要安装在 devDependencies 开发环境依赖里面，不然之后打包会有报错。（见坑）

(2)package.json配置打包属性和命令

{
    "build": {
        "productName":"zwtzzwwtt", //项目名 这也是生成的exe文件的前缀名
        "appId": "1997", // 包名 
        "directories": {
          "output": "builder" // 输出文件夹
        },
        "win": {
          "target": [
            "nsis", // 目标封装类型，默认使用niss，win平台一般也是用这个，可写可不写
            "zip"
          ]
        },
        // niss一般用来配置安装和卸载程序的
        "nsis": {
          "shortcutName": "makalo-cnblog-tool",  // 用于所有快捷方式的名称。默认为应用程序名称
          "oneClick": false,  // 是创建一键安装程序还是辅助安装程序
          "perMachine": true,  // 是否开启安装时权限限制（此电脑或当前用户）true 表示此电脑，false代表当前用户
          "allowElevation": true,  // 仅辅助安装程序有效。允许请求提升。如果为false，则用户将不得不以提升的权限重新启动安装程序
          "allowToChangeInstallationDirectory": true,  // 仅辅助安装程序有效。是否允许用户更改安装目录
          "createDesktopShortcut": true, // 创建桌面图标
          "createStartMenuShortcut": true, // 创建开始菜单图标
        }
        "files": [
          "build/**/*", // 需要打包的前端已打包好的文件
          "main.js" // 主文件main.js
        ]
    },
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --progress --hot",
        "webpack": "webpack --progress", // 打包前端页面
        "electron": "electron .",
        "dist": "electron-builder" // 打包electron
    },
}
复制代码