【electron】5分钟把网页打包成可安装的exe桌面应用

老板们突发奇想，把现有的一个管理后台系统打包成桌面端可安装应用，当时我脑海就浮现出两套方案，Electron或Flutter的Webview来打包应用，相对来说Electron熟悉点，就优先考虑了使用Electron，当然后来也使用Flutter实现了一版，效果差别不大，我们先来看看Electron是怎么实现的。

准备工作

初始化项目

新建项目文件夹electron-app，记得在命令行窗口把路径切换到electron-app目录下，执行初始化命令

shell复制代码npm init -y

最新的文件结构应该如下所示，多了一个package.json文件。

markdown复制代码- electron-app
    - package.json

用编辑器打开package.json

json复制代码{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

要特别注意里面"main"这项配置，这个配置指向了项目的入口，目前对应的文件是index.js，但我们项目中还没有，那就新建一个。

markdown复制代码- electron-app
    - index.js
    - package.json

填充index.js文件内容如下

js复制代码// index.js

const { app, BrowserWindow } = require('electron')

const createWindow = () => {

    // 创建浏览器窗口
    const win = new BrowserWindow({