uniapp打包桌面应用exe

uniapp具有打包app等功能，最近接手的项目中也实现了uniapp打包桌面应用exe

文章目录

一、插件Electron

二、使用步骤

1.全局安装electron插件

2.修改manifest.json

3.H5打包

4.在打包后生成的H5文件夹下新建package.json和main.js

5.最终打包

运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件

总结

---

一、插件Electron

简单介绍下Electron：

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

二、使用步骤

1.全局安装electron插件

代码如下（示例）：

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

会出现两种问题：

• 问题1：解决npm下载过慢问题

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

如果不想安装cnpm又想使用淘宝的服务器来下载包
npm install jquery --registry=https://registry.npm.taobao.org
但是每一次手动这样加参数很麻烦，所以我们可以把这个选项加入配置文件中：
npm config set registry https://registry.npm.taobao.org

• 问题2：在安装electron时出现以下报错：

connect ETIMEDOUT 20.205.243.166:443

解决办法：

ping GitHub.com

如果能ping通，继续以下操作

更改electron安装源。
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

安装成功

2.修改manifest.json

代码如下（示例）：

h5配置

运行的基础路径修改为：./  不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/

去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。

图示如下：

3.H5打包