electron打包前端页面为exe桌面应用

前提

node安装

npm , electron , nativefier 等都需要依赖node.js，所以需要首先安装node.js。node安装可以直接百度搜索node，如图

任选一个下载即可，我选的是14.11.0版的。双击下载下来的msi文件，即可进入安装程序，安装程序需要注意安装的路径，最好不要安装在c盘，其余的默认就好，一路next等待安装完毕即可。
安装完node可以在Windows cmd命令行下输入以下命令，如果都出现版本号，如 v10.1.2表明安装成功。

node -v
npm -v

然后需要为node配置环境变量，在我的电脑-》属性-》高级设置-》环境变量中配置，系统变量中新增NODE_PATH，路径选择安装目录下的node_modules即可，如下图

在node的安装目录中新建两个文件夹node_cache node_global作为npm下载的路径和缓存路径。

然后配置用户变量path，点击编辑，结果如下图。

至此node安装完毕。

npm镜像配置等

因为npm是从国外的网站下载，所有接下来需要配置npm镜像。
配置npm依次输入下列命令即可

npm config set registry https://registry.npm.taobao.org/
npm config set perfix D:\node\node_global
npm config set cache D:\node\node_cache
npm config set electron_mirror http://npm.taobao.org/mirrors/electron/

这些命令中perfix和cache配置了npm的全局下载路径和缓存路径，剩下的两条命令配置了npm淘宝镜像。
或者可以下载cnpm，使用cnpm命令下载，不过不推荐，后续打包需要使用npm，但打包过程中需要下载electron-v10.1.2-win32-64.zip文件，如果npm没有配置淘宝镜像，照样很慢，甚至失败。

 npm install -g cnpm --registry=https://registry.npm.taobao.org

至此npm的各种配置完成。

electron打包

打包准备

我这里使用的是最简单的格式，项目目录如下

hello为项目根目录，如果想要使用electron打包的文件比较复杂，可以先在idea或者其它代码工具中打包，然后替换index.html文件。所以index.html中可以自己定义，这里仅贴出main.js package.json两个文件的代码
main文件

const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600});
   // and load the index.html of the app.
  win.loadURL(`http://localhost:8083/admin/scan/data`);
  // Open the DevTools.
  win.webContents.openDevTools();
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}
// 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', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X 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 OS X 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 (win === null) {
    createWindow();
  }
  });
  // In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

package文件

{
  "name": "5808",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package":"electron-packager . helloworld --platform=win32 --arch=x64 --electronVersion=10.1.2 --overwrite --ignore=node_modules --ignore=.gitignore"
  },
  "devDependencies": {
    "electron-packager": "^15.1.0"
  }
}

其中package electron-packager 可以根据需要查阅文档进行修改。
mian.js 文件中win.loadURL()用于打包网址，loadFile（）可打包文件，根据需要修改。

打包

进入项目根目录，即hello文件夹，输入以下命令即可完成打包

npm install electron-packager --save-dev
npm install electron-packager -g
npm run package

踩过的坑

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 5808@0.1.0 package: electron-packager . 5808 --platform=win32 --arch=x64 --electron-version 10.1.2 --overwrite --ignore=node_modules
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 5808@0.1.0 package script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
报错信息因为package.json中–electron-version 应该改为–electronVersion

然后下载很慢是因为npm没有配置好淘宝镜像，npm config set registry 和 npm config set electron_mirror缺一不可