前端文件打包成electron桌面应用

1、初始化 node 项目，生成 package.json 文件

npm init

2、安装electron 依赖到项目中

npm install --save-dev electron
yarn add electron --dev

• package.json 配置如下：

{
  "name": "electron-evaluation",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.2.0"
  }
}

3、创建前端项目或引入前端项目, 项目目录为以下结构：

注：loveStory为引入的前端项目

3. 创建index.js入口文件，配置以下内容：

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {   
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,   //窗口宽度,单位像素. 默认是 800
    height: 600,  //窗口高度,单位像素. 默认是 600
    icon: './logo.ico', // 设置窗口左上角的图标
    show: false, //窗口创建的时候是否显示. 默认为 true
    webPreferences: {
      nodeIntegration: true, // 是否完整支持node。默认为 true
      preload: path.join(__dirname, 'preload.js')  //界面的其它脚本运行之前预先加载一个指定脚本。
    }
  })
  // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
  // win.maximize()
  win.show()
  // 并且为你的应用加载index.html
  win.loadFile('./loveStory/index.html')
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

4.创建preload.js，所有Node.js API都可以在预加载过程中使用配置以下内容：

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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]);
  }
});

5. 运行命令 npm start ，可快速打开你的web应用，查看应用配置的内容是否正确。

6. 安装打包依赖，推荐以下两种方式：electron-packager 和 electron-builder

一、electron-packager

• 使用electron-packager打包，安装electron-packager依赖

npm install --save-dev electron-packager
yarn add electron --dev

• 安装成功后需要配置package.json文件，配置如下：

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . ALittleLoveStory --platform=win32 --arch=x64 --out=./build --electron-version 18.2.0 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },

• packager参数介绍：

• platform：设置平台，window，linux还是Mac
• arch：x84还是x64，
• outapp的位置可以替换成你打包后的exe名字
• electron-version：electron的版本，必须要指定，这里设置为18.2.0，可查看package.json中electron安装的版本号
• icon 图标地址

• 执行命令 npm run packager，运行成功后就会在项目根目录中看到build文件，运行exe文件就可以看到打包后的项目了。

二、electron-builder

• 使用electron-builder打包，安装electron-builder依赖

npm install  electron-builder --save-dev
yarn add electron-builder --dev

• 安装成功后需要配置package.json文件，配置如下

{
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
 // 使用electron-builder打包需要配置"build"
 "build": {
      "productName":"xxxx",   // 项目名称
      "appId": "electron.app",  // 安装包名称
      "directories": { 			
        "output": "build"
      }, // 输出文件夹
      "copyright":"xxxx", // 版权信息
      "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脚本
      },
      // 发布到github
      publish: {
        provider: 'github',
        repo: 'xxxx', // git仓库
        owner: 'xxxx', // 拥有者
        token: 'xxxxxxxxxxxxxxx', // gitToken
        releaseType: 'release',
        publishAutoUpdate: true // 发布自动更新（需要配置GH_TOKEN）。 默认true
      },
      //配置windows环境
      "win": {
        "icon": "build/icons/aims.ico",
        "target": ["nsis","zip"]
      },
      //配置mac环境
      "mac": {
        "target": ["dmg","zip"]
      },
      //配置linux环境
      "linux": {
        "icon": "build/icons"
      }
  }
}
//来自：https://segmentfault.com/a/1190000016695922?utm_source=tag-newest

• 执行命令 npm run build，运行成功后就会在项目根目录中看到build文件，运行exe文件就可以看到打包后的项目了。

我这里用的是electron-packager打的包

• 打包后的dist目录：
  
• 运行.exe的效果
  

至此，一个简单的桌面端应用就生成了

当然就有同学疑问了，这只是一个简单的静态页面，那vue和react项目该如何打包呢？大家可以参考下以下博客

Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载
Vite+Electron快速构建一个VUE3桌面应用(三)——打包