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

uniapp Electron打包生成桌面应用exe文件

news 来源：原创 2025/5/11 4:47:14

1.uniapp Electron打包生成桌面应用exe文件

随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。

1.1. 前言

1.1.1. Electron

Electron文档：https://www.electronjs.org/zh/docs/latest/tutorial/keyboard-shortcuts
Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，它使开发人员能够使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它已经被众多知名公司使用，例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。
Electron 使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
在桌面程序中，使用C#语言可以创建winform和WPF程序，他们2个在Windows中都非常的优秀，还有就是使用QT开发桌面，可以跨平台开发，这三种都是比较“正规”的，而Electron是使用框架开发桌面程序的，还有其他的框架也可以开发桌面程序等。

1.1.2. 前提条件

（1）已安装 Node.js (建议使用 LTS 版本)
（2）已安装 Git (可选)
（3）已安装 HBuilderX 或其他支持 UniApp 的 IDE
（4）已安装 uni-app CLI (npm install -g @dcloudio/uni-app)
在这里插入图片描述

1.1.3. 安装node.js，

安装node.js，在https://nodejs.org/en/download/ 网页上下载安装即可。
按照网址安装配置即可https://www.cnblogs.com/liuqiyun/p/8133904.html
在这里插入图片描述
npm版本如下

npm -v

在这里插入图片描述
npm版本如下

npm -v

node版本如下

node -v

在这里插入图片描述

1.1.4. 安装Electron相关插件

（1）安装electron（主程序）

npm install electron -g

[或者使用淘宝镜像

cnpm install electron -g

（2）安装electron（打包）

npm install electron-packager -g

或者使用淘宝镜像

cnpm install electron-packager -g

（3）判断electron
检查electron是否安装成功，

electron -v

显示版本号则安装成功。
在这里插入图片描述

1.1.5. 解决npm下载过慢问题

安装淘宝的cnpm：
#在任意目录执行都可以
--global意思为安装到全局
npm install --global cnp

如果不想安装cnpm又想使用淘宝的服务器来下载包

npm install jquery --registry=https://registry.npm.taobao.org

但是每一次手动这样加参数很麻烦，所以我们可以把这个选项加入配置文件中：

npm config set registry https://registry.npm.taobao.org

1.1.6. 在安装electron时出现以下报错：

connect ETIMEDOUT 20.205.243.166:443
解决办法：

ping GitHub.com

如果能ping通，继续以下操作
更改electron安装源。

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

安装成功

1.1.4. 解决npm下载过慢问题

1.2. 安装步骤

1.2.1. 创建或准备 UniApp 项目

如果你还没有 UniApp 项目，可以使用 HBuilderX 或者命令行创建一个新的项目；如果你已经有了一个 UniApp 项目，确保它已经包含了你需要的所有功能。
在这里插入图片描述

1.2.2. 安装 Electron 相关插件

在项目根目录下打开终端，安装 uni-app 的 Electron 插件：

npm install --save-dev @dcloudio/uni-electron

cnpm install electron -g // 安装electron（主程序）
cnpm install electron-packager -g // 安装electron-packager（打包用）

在这里插入图片描述

1.2.3. 修改manifest.json

（1）运行的基础路径修改为：./ 不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/
（2）去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。
在这里插入图片描述

1.2.4. H5打包

发行-网站-PC Web或手机H5(仅适用于uni-app)(H)
在这里插入图片描述

H5文件夹下新建package.json

npm init

在这里插入图片描述

1.4.6. H5文件夹下新建main.js

如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。
在这里插入图片描述
（1）方法一：加菜单

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')// 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 winfunction createWindow () {// Create the browser window.win = new BrowserWindow({width: 400, height: 700})// and load the index.html of the app.win.loadURL(url.format({pathname: path.join(__dirname, 'index.html'),protocol: 'file:',slashes: true}))// Open the DevTools.// win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed'

1.uniapp Electron打包生成桌面应用exe文件

1.1. 前言

1.1.1. Electron

1.1.2. 前提条件

1.1.3. 安装node.js，

1.1.4. 安装Electron相关插件

1.1.5. 解决npm下载过慢问题

1.1.6. 在安装electron时出现以下报错：

1.1.4. 解决npm下载过慢问题

1.2. 安装步骤

1.2.1. 创建或准备 UniApp 项目

1.2.2. 安装 Electron 相关插件

1.2.3. 修改manifest.json

1.2.4. H5打包

1.4.6. H5文件夹下新建main.js

相关文章：