uniapp + electron 打包项目

参考文献

1、控制台安装electron和electron打包工具electron-packager

npm install electron -g
npm install electron-packager -g

2、manifest.json修改

在这里插入图片描述运行的基础路径修改为:./ 不然打包出来会出现白屏,读取不到,因为打包出来的h5默认加载地址为/static/
去掉启用https协议: 不然会出现网络无法加载,去掉https不影响你请求后端的https协议。(这个可加可不加,主要是看后台有没有配置白名单这种的,影响不大)

3.h5正常打包,打包后再h5文件夹下新建 package.json和main.js文件

main.js也可以改成其他的js名称,但是package.json里面的 {main:其他.js}记得改
在这里插入图片描述
注意: build 文件 的根目录要注意,如果项目没打包过app端,则会再最外层App.vue同级生成/dist/build/h5 文件,如果之前有打包过app端的,则是多一层 unpackage/dist/build/h5

package.json 内容

我的应用—》对应之前设置的web配置的页面标题,我的是 judarhr_content_distribution

{"name":"我的应用","version":"2.0","main":"main.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","electron":"electron .","start":"electron .","build":"electron-packager ./ 我的应用 --plantform=win32 --arch=x64 --out 我的应用 --overwrite --icon=xdt.ico"},"author":"","license":"ISC","devDependencies":{"electron":"^23.3.13","electron-packager":"^12.2.0"}
}

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')let winfunction createWindow () {win = new BrowserWindow({width: 700, height: 400,icon:'./static/logo.png', //autoHideMenuBar:true,//隐藏菜单栏})//加载本地文件 index.htmlwin.loadURL(url.format({pathname: path.join(__dirname, 'index.html'),protocol: 'file:',slashes: true}))//打开控制器win.webContents.openDevTools();//点击关闭的时候, win 一定要释放掉win.on('closed', () => {win = null})
}
//加载窗体
app.on('ready', createWindow)//IOS 关闭页面(ios比较特殊win.on('closed')只是关闭显示窗口,但是后台还是会存在,更像是隐藏窗体,所以需要这种判断方式推出)
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {if (win === null) {createWindow()}
})

如果你的网页首页的文件名不是 “index.html”,那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。

4、打包

\dist\build\h5文件夹处执行打包命令

npm run build

5、运行

npm run start

关闭窗口则整个electron 关闭,得重新运行

6、进入调试模式

第一种:ctrl+shift+i
第二种:main.js配置 win.webContents.openDevTools();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/184892.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JavaEE】线程安全与线程状态

作者主页:paper jie_博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文于《JavaEE》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造&…

配电房综合监控系统

配电房综合监控系统是一种集成了实时监控、数据采集、远程控制等多功能的系统,用于对配电房进行全方位的监测和管理。 力安科技配电室综合监控系统依托电易云-智慧电力物联网,实现配电室环境监测、有害气体监测、安防监控、采暖通风、门禁、灯光、风机、…

进阶C语言-字符函数和字符串函数

字符函数和字符串函数 🎈1.函数介绍🔎1.1strlen函数🔭1.1.1strlen函数的模拟实现📖1.计数器法📖2.递归法📖3.指针-指针 🔎1.2strcpy函数🔭1.2.1strcpy函数的模拟实现 🔎1…

Linux系统编程 day07 信号

Linux系统编程 day07 信号 1. 信号的介绍以及信号的机制2. 信号相关函数2.1 signal2.2 kill2.3 abort和raise2.4 alarm2.5 setitimer 3. 信号集4. 信号捕捉函数6. SIGCHLD信号7. SIGUSR1与SIGUSR2 1. 信号的介绍以及信号的机制 信号是信息的载体,在Linux/Unix环境下…

如何有效的进行 E2E

一、前言 本文作者介绍了什么是E2E测试以及E2E测试测什么,并从对于被测系统、测试用例、测试自动化工具、测试者四个方面的要求,介绍了如何保证E2E测试有效性,干货满满,值得学习。 二、什么是E2E测试 相信每一个对自动化测试感…

需求不明确的情况下,测试该如何处理?

当需求不明确的情况下,测试团队可以采取以下措施来处理: 1. 与项目团队进行沟通:测试团队应与项目团队密切合作,与业务分析师、产品经理等相关人员进行沟通,以获取更多的需求细节和背景信息。通过与相关方的交流&…

zookeeper 客户端常用命令简单记录(实操课程系列--watcher功能测试)(发布订阅功能测试)

本系列是zookeeper相关的实操课程,课程测试环环相扣,请按照顺序阅读测试来学习zookeeper。阅读本文之前,请先阅读----zookeeper 单机伪集群搭建简单记录(实操课程系列) 1、命令行工具切换到zookeeper的bin目录下面&am…

springboot自定义校验注解的实现

自定义校验注解的实现 通过谷粒商城项目学习了自定义校验器的实现一、编写自定义校验注解二、自定义注解的校验器三、关联自定义的校验器和自定义的校验注解总结 通过谷粒商城项目学习了自定义校验器的实现 近日在学习雷神的谷粒商城项目,其中有一个自定义校验的实…

国外客户跟我要佣金,该给不该给?

“Jack,这次你要是不帮我,我就死定了!” 收到美国公司采购Antony的信息时,我有些哭笑不得,因为在我电脑屏幕上除了他的信息外,还有来自他公司监察部门的邮件: “jack先生,我们调查…

二极管钳位电路的作用

1、使用钳位二极管的瞬态保护即将输出电压限定在某个区间 钳位二极管不仅仅是为了改变电压基线。它们在缓解瞬态事件方面非常有用,尤其是ESD和雷电浪涌。例如,当输入电压高于 Vh 时,D1 正向偏置。因此,过多的电流流过 D1 而不是负…

Linux Centos系统安装Mysql8.0详解

本文是基于服务器Linux Centos 8.0系统 安装 Mysql8.0真实运维工作实战为例,详细讲解安装的全过程。 1,检查卸载mariadb Mariadb数据库是mysql的分支,mariadb和mysql会有冲突,所以安装Mysql前,首先要检查是否安装了m…

java学习part23异常try catch

124-异常处理-异常的概述与常见异常的举例_哔哩哔哩_bilibili 1.异常 2.try catch 3.finally 类似golang的defer 一定执行的语句

7-1 哈夫曼树与哈夫曼编码

哈夫曼树与哈夫曼编码 题目描述输入格式输出格式输入样例输出样例 分数 30 作者 伍建全 单位 重庆科技学院 题目描述 哈夫曼树(Huffman Tree)又称最优二叉树,是一种带权路径长度最短的二叉树。所谓树的带权路径长度,就是树中所有的叶结点的权值乘上其到…

为什么要在项目中使用TypeScript?

随着越来越多的开发人员采用TypeScript,人们需要了解在下一个项目中应该使用TypeScript的原因。尽管它在早期应用中遇到了一些阻力,但在过去十年,它迅速成为一种广泛使用的编程语言。 以下介绍如何使用TypeScript以及它给开发人员带来的一些好…

堆在排序中的应用

堆排序 1、堆排序原理 堆排序是利用到了堆这种数据结构,我们首先回顾一下二叉堆的特性: 最大堆的堆顶是整个堆中的最大元素。最小堆的堆顶是整个堆中的最小元素。 以最大堆为例,如果删除一个最大堆的堆顶(并不是完全删除&…

如何利用树莓派与Nginx结合内网穿透服务实现远程访问内部站点——“cpolar内网穿透”

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx(发音为“engine-x”)可以将您的树莓派变成一个强大的 Web 服务器,可以用于托管网站或 Web 应用程序。相比其他 Web 服务器,Ngi…

Electron+Ts+Vue+Vite桌面应用系列:TypeScript常用语法详解

文章目录 1️⃣ TypeScript常用讲解1.1 使用1.2 字符串1.3 数字1.3 布尔1.4 数组1.5 元组1.6 枚举1.7 any1.8 void1.9 object1.10 函数指定返回值的类型1.11 联合类型1.12 类型断言1.13 接口1.14 函数类型1.15 类类型1.16 泛型 2️⃣ 类2.1 类的基本写法2.2 类的继承2.3 类的修…

数据结构 | 二叉树的概念及前中后序遍历

数据结构 | 二叉树的概念及前中后序遍历 文章目录 数据结构 | 二叉树的概念及前中后序遍历一、树概念及结构1.1 树的相关概念 二、树的表示2.2 树在实际中的运用(表示文件系统的目录树结构) 三、二叉树概念及结构3.1 二叉树的基本概念3.2 二叉树的结构&a…

文档理解的新时代:LayOutLM模型的全方位解读

一、引言 在现代文档处理和信息提取领域,机器学习模型的作用日益凸显。特别是在自然语言处理(NLP)技术快速发展的背景下,如何让机器更加精准地理解和处理复杂文档成为了一个挑战。文档不仅包含文本信息,还包括布局、图…

熟练运用这些黑盒测试知识点,月薪翻倍不是难题

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…