当前位置：首页 > wzjs >正文

百度网站建设制作公司樟木头网站

wzjs 2025/9/14 4:37:47

百度网站建设制作公司,樟木头网站,适合 wordpress 图标,wordpress rds1 、Electron 打包，包括需要下载的内容和环境配置步骤注意：Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js 和 npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环…

1 、Electron 打包，包括需要下载的内容和环境配置步骤

注意：Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架

首先需要电脑环境有Node.js 和 npm我之前的文章有关nvm下载node的说明也可以去官网下载

检查是否有node和npm环境命令

node -v
npm -v

输出版本号，说明安装成功

2、创建 Electron 项目

2.1 创建项目目录
打开命令行工具，创建一个新的项目目录并进入该目录：

mkdir electron-app
cd electron-app

2.2 初始化项目

npm init -y

2.3 安装 Electron

npm install electron --save-dev

2.4 创建项目文件(可在vscode或者hbuilder打开并创建)

在项目根目录下创建 main.js 和 index.html 文件。
main.js 文件内容如下：

const { app, BrowserWindow } = require('electron')function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false}})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

index.html 文件内容如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Hello World!</title>
</head>
<body><h1>Hello World!</h1>We are using Node.js <script>document.write(process.versions.node)</script>,Chromium <script>document.write(process.versions.chrome)</script>,and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

2.5 配置启动脚本

在 package.json 文件中添加启动脚本：

{"name": "electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron ."},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^23.2.1"}
}

2.6 启动项目

在命令行中执行以下命令启动 Electron 应用：

npm start

3. 选择打包工具并安装

常见的 Electron 打包工具有 electron-builder 和 electron-packager，这里以 electron-builder 为例。

3.1 安装 electron-builder

在项目目录下执行以下命令安装 electron-builder：

npm install electron-builder --save-dev

4. 配置 electron-builder

在 package.json 文件中添加 build 字段来配置打包选项：

{"name": "electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "electron-builder"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^23.2.1","electron-builder": "^23.6.0"},"build": {"appId": "com.example.electron-app","productName": "Electron App","directories": {"output": "dist"},"win": {"target": ["nsis"]},"mac": {"target": ["dmg"]},"linux": {"target": ["deb"]}}
}

上述配置中，appId 是应用的唯一标识符，productName 是应用的名称，directories.output 是打包输出的目录。win、mac 和 linux 分别指定了不同操作系统下的打包目标。

5. 打包应用

5.1 打包测试
执行以下命令进行打包测试，该命令会在 dist 目录下生成一个未压缩的应用包：