在原有的vue（react）项目中引入electron打包成桌面应用（全网最新！）

基于原有的项目中使用electron打包成桌面应用

首先了解electron是什么？

软件简介

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

进入主题：

1. vue添加electron包（使用npm命名全局安装）

  npm install electron -g

2. Vue项目添加Electron-builder打包工具

  vue add electron-builder

注意: 如果出现electron安装失败，或者后面使用electron-builder打包时，出现从github down包失败，请设置electron镜像。

设置镜像方法：

npm config edit

解释：使用该命令会弹出npm的配置文档，将以下类容复制到文件末尾。

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

3. 在项目根目录加入background.js(自己命名即可)，然后写入以下代码：

"use strict";

import { app, protocol, BrowserWindow, Menu } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1260,
    height: 800,
    // frame: false, // 如果需要去除窗口边框
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, // 在向导页面中使用 Node.js 模块
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

// 隐藏客户端默认菜单
Menu.setApplicationMenu(null);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

4. 在package.json文件里面加入

"main": "background.js",

运行测试：

npm run serve--网页
npm run electron:serve--客户端

项目打包：

npm run electron:build

注意：如果打包报错！！！
Node.js v19.x.x 版本时可能会遇到Error: error:0308010C:digital envelope routines::unsupported
原因：使用的 OpenSSL 版本不受支持导致的

解决方法：
检查自己node版本 尽量使用v16版本的！！

其他可能出现问题解决办法：

打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，在 executeMakensis 方法中加入我们所需的参数

{
args.push("-INPUTCHARSET", "UTF8");
}

附加1 替换客户端图标及配置安装程序

进入项目路径，查看是否存在vue.config.js同名文件（好像是vue3没有，vue2会有），没有则创建一个空文件。加入以下代码：

module.exports = {
  pluginOptions: {
      electronBuilder: {

          customFileProtocol: "/",  //解决element图标问题（起因：因为打包，element-ui的样式没有当做静态资源引用）

          builderOptions: {
            "appId": "com.tomatoLRX.app",
            "productName": "SPTSystem",//项目名，也是生成的安装文件名，即aDemo.exe
            "copyright": "Copyright © 2023",//版权信息
            "directories": {
              "output": "./dist"//输出文件路径，之前编译的默认是dist_electron
            },
           win: {
              icon: "vueApp.ico", //这里注意配好图标路径
              target: [
                 {
                   target: "nsis", //利用nsis制作安装程序,打包文件的后缀为exe
                   arch: [
                   "x64", //64位
                   "ia32", //32位
                   ],
                 },
             ], //添加自定义安装向导
          },
        nsis: {
             oneClick: false, //创建一键式安装程序还是辅助安装程序
             language: "2052", //安装语言
             perMachine: true, //应用所有用户
             allowToChangeInstallationDirectory: true, //用户可以选择路径
            },
            // options placed here will be merged with default configuration and passed to electron-builder
          }
      }
  }
}

更多配置可参考electron-builder的配置：

"build": {
    "productName":"xxxx",		//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",	//包名  
    "copyright":"xxxx",			//版权信息
    "directories": { 			//输出文件夹
      "output": "build"
    }, 
    "nsis": {	//nsis相关配置，打包方式为nsis时生效
      "oneClick": false, 								// 是否一键安装
      "allowElevation": true, 							// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, 		// 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",			// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",		//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", 	// 安装时头部图标
      "createDesktopShortcut": true, 					// 创建桌面图标
      "createStartMenuShortcut": true,					// 创建开始菜单图标
      "shortcutName": "xxxx", 							// 图标名称
      "include": "build/script/installer.nsh", 			// 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", 		// 服务器提供商，也可以是GitHub等等
        "url": "http://xxxxx/" 		// 服务器地址
      }
    ],
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",			//使用nsis打成安装包，"portable"打包成免安装版
          "arch": [
            "ia32",				//32位
            "x64" 				//64位
          ]
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "linux": {
      "icon": "build/icons"
    }
  }

附加2 隐藏客户端默认菜单

程序的main是background.js，找到它打开编辑

里面是electron代码，直接修改，添加Menu引用，然后设置程序菜单为null，运行发现菜单已经没有了，重新打包即可。

import {  Menu } from "electron";
// 隐藏客户端默认菜单
Menu.setApplicationMenu(null);