使用electron将H5打包成exe

先上成果，下图就是打包好的exe文件

 具体步骤如下：

1.安装electron

执行：npm install electron -g

ps:建议全局安装，另外使用镜像下载的快，且需要注意与node版本匹配（electron21.0.1需要node14.17.0以上）

pps:因为我node版本之前是14.7.0，低于electron21.0.1要求的node版本，所以升级了一下node，这里引出另外一个知识点，windows系统直接从nodejs官网上下载指定版本覆盖原node文件即可，查找node文件夹位置执行:where node

这里参考了：https://www.jianshu.com/p/caf18c16c2e9

2.安装electron-packager（打包用）

执行npm install electron-packager -g

3.新建package.json和main.js，还有preload.js,位置都在项目的根目录下

3.1package.json中的配置main键对应的值即使刚新建的main.js

{

        "name" : "app-name",

         "version" : "0.1.0",

         "main" : "main.js"

}

目录结构如下：

 3.2然后配置main.js

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

function createWindow () {
  Menu.setApplicationMenu(null)        //菜单栏隐藏
  const win = new BrowserWindow({
    width: 1920,        //窗口宽度
    height: 1080,        //窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')        //程序入口文件
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3.3配置preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})
 

4.最后打包

执行语句：electron-packager . 要执行的文件名 --win --out 输出的文件名 --arch=x64位还是32位

--electron-version electron版本 --overwrite --ignore=node_modules

例如：electron-packager . doubleView --win --out doubleView --arch=x64 --electron-version 21.0.1 --overwrite --ignore=node_modules

最终将得到开篇展示的打包文件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！