Electron打包本地网站简单流程(windows)

一、安装NodeJS

自己去官方下载安装即可

二、安装electron及electron-packager

安装完NodeJs会一并帮我们安装npm包管理工具，我们使用npm安装electron及electron-packager

npm install electron --save-dev

npm install electron-packager -g

注意electron可能拉取不下来，我们可以换一个镜像

// 设置npm阿里镜像，之前的taobao镜像已经弃用了
npm config set registry https://registry.npmmirror.com/

// 设置electron从指定镜像地址拉取
npm config set ELECTRON_MIRROR http://npmmirror.com/mirrors/electron/

三、配置package.json文件

我们新建一个目录比如叫deskApp，打开cmd窗口进入目录下执行

// 初始化package.json文件
npm init -y

打开package.json文件，将如下内容复制进去

{
  "name": "deskApp", 
  "version": "1.0.0",
  "description": "deskApp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build":"electron-packager ./ 打包后的应用名 --platform=win32 --arch=x64 --electron-version=31.0.0 --out=./dist --overwrite --icon=./deskApp/icon.ico"
  },
  "keywords": [],
  "author": "Moreduo",
  "license": "ISC",
  "devDependencies": {
    "electron": "^31.0.0"
  }
}

这里的--electron-version=31.0.0请改为你npm拉取的版本，即和devDependencies中的electron版本一致

--out=./dist 表示打包的输出位置是当前目录下的dist文件夹，这个东西时好时坏，可能是我electron版本问题吧，如何没有在对应目录生成就去shell窗口提示的对应目录去找。

四、拷贝项目到根目录

比如我的项目都在webApp文件夹里，我把webApp文件夹拷贝进我们上面新建的deskApp目录下

五、新建入口文件index.js

我们在deskApp目录下新建index.js文件，将如下内容拷贝进去

const electron = require("electron");
const app = electron.app;
const path = require("path");
const url = require("url");
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
//创建主窗口
app.on("ready", function () {
    // 创建窗口
    mainWindow = new BrowserWindow({
        minimizable: true, // 最小化按钮
        maximizable: true, // 最大化按钮
        closable: true, // 关闭按钮
        movable: true, // 是否可移动
        frame: true, //边框
        fullscreen: true, //全屏
        titleBarStyle: "hidden", // 标题栏可选配置 default,hidden（上面的最大，最小关闭按钮想生效这里就得设置为default且不能是全屏状态）
        autoHideMenuBar: true, // 菜单栏
        //图标
        icon: path.join(__dirname, "/webApp/icon.ico"),
    });
    // 应用入口文件
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, "/webApp/index.html"),
            protocol: "file:",
            slashes: true,
        })
    );
    // 窗口右键
    const contextMenu = Menu.buildFromTemplate([
        {
            label: "全屏",
            click: () => mainWindow.setFullScreen(true),
        },
        {
            label: "隐藏",
            click: () => mainWindow.minimize(),
        },
        {
            label: "刷新",
            click: () => mainWindow.webContents.reload(),
        },
        {
            label: "关闭",
            click: () => mainWindow.close(),
        }
    ]);
    mainWindow.webContents.on("context-menu", (e, params) => {
        contextMenu.popup();
    });
});

六、运行打包

打开cmd运行我们package.json中配置的打包命令

npm run build

看到如下界面

这里是打包成功了，可惜输出的位置并不是我配置的地方（有时候是对的）。不过也无所谓了，我们到对应目录找到应用双击打开就可以了。