electron打包exe文件

qq_39554744

已于 2024-01-16 16:34:43 修改

阅读量793

点赞数 9

文章标签： electron chrome 前端

于 2024-01-16 16:33:03 首次发布

本文链接：https://blog.csdn.net/qq_39554744/article/details/135625706

版权

1、初始化项目

electron文档：https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
node之前的版本是 14.21.3, 下载依赖失败，换成了20.11.0就好使了

创建空的项目

mkdir my-electron-app && cd my-electron-app
yarn init

生成得package.json文件内容如下：

{
  "name": "electron-scaffold",
  "version": "1.0.0",
  "description": "THE EXAMPLE FOR DESKTOP APPLICATION",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wzy",
  "license": "ISC"
}

设置main.js为入口文件。ahthor不能为空，否则会打包失败！

安装electron包

yarn add electron --dev

package.json添加启动命令 electron .

{
  "name": "electron-scaffold",
  "version": "1.0.0",
  "description": "THE EXAMPLE FOR DESKTOP APPLICATION",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wzy",
  "license": "ISC"
}

index.html文件内容如下:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  We are using Node.js <span id="node-version"></span>,
  Chromium <span id="chrome-version"></span>,
  and Electron <span id="electron-version"></span>.
</body>

</html>

preload.js文件内容如下：

/***
 * 预加载脚本，在渲染完成之前执行，能获取到window和document等全局对象
 */
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])
    }
  })

main.js文件内容如下：

const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('node:path')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

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

  // 窗口在ready事件开始后初始化，适用于macos平台。关闭所有窗口后，macos平台仍会运行程序
  app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 监听关闭事件
app.on('window-all-closed', () => {
  // 判断是否为window平台
  if (process.platform !== 'darwin') app.quit()
})

执行启动命令

yarn run start

程序启动后界面图如下：
在这里插入图片描述

2、打包项目

添加依赖

yarn add --dev @electron-forge/cli
npx electron-forge import

依赖可能会出现拉取失败的问题，此时需要配置镜像

镜像配置命令：

yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

npx命令可能执行失败，提示no such file…此时需要升级node到最新版本。

修改package.json文件，添加命令脚本

{
  "name": "electron-scaffold",
  "version": "1.0.0",
  "description": "THE EXAMPLE FOR DESKTOP APPLICATION",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  },
  "author": "wuzhiyang",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-deb": "^7.2.0",
    "@electron-forge/maker-rpm": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
    "@electron-forge/publisher-github": "^7.2.0",
    "electron": "^28.1.3"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

执行打包命令， arch参数表示要运行的架构，参考文档：https://www.electronforge.io/cli#make

-- 打包为64位的平台可执行包
yarn run package  --arch="x64"

输出文件如下：
在这里插入图片描述
打包为单独的可分发文件

 yarn run make -- --arch="x64"

输出文件如下：
在这里插入图片描述

qq_39554744

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
electron打包exe文件

electron文档：https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app。npx命令可能执行失败，提示no such file…此时需要升级node到最新版本。node之前的版本是 14.21.3, 下载依赖失败，换成了20.11.0就好使了。打包为单独的可分发文件。
复制链接

扫一扫