【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

文章目录

  • 前言
  • 使用 electron-vue 创建项目
    • 1. 安装 vue-cli(如果未安装)
    • 2. 使用 electron-vue 模板创建项目
    • 3. 安装和配置 electron-builder
    • 4. 运行Electron项目
    • 5. 打包应用
  • 可能遇到的问题
    • 解决Electron vue首次启动巨慢无法加载
    • 执行npm run electron:build打包慢
    • 如何设置打包的logo、设置exe图标
    • 设置页面程序的大小、窗口大小
    • 如何设置打开窗口的名称/标题
    • 如何设置打包后exe的名称
  • 其他注意事项

前言

在Electron应用中结合使用Vue.js,可以创建功能强大的桌面应用程序。为了将Electron与Vue.js集成,你可以使用electron-vue,一个流行的工具包,它简化了在Electron项目中使用Vue.js的过程。

该篇文章参考:搭建Electron vue项目过程

使用 electron-vue 创建项目

electron-vue 是一个已经配置好的项目模板,集成了Vue.js和Electron,可以快速启动开发。以下是使用electron-vue创建项目的步骤:

1. 安装 vue-cli(如果未安装)

如果你还没有安装vue-cli,需要先安装它:

npm install -g @vue/cli

2. 使用 electron-vue 模板创建项目

使用以下命令创建一个新项目:

vue create my-project

然后,在询问要使用的模板时,选择Manually select features并选择需要的特性(如Babel、Router等)。创建完成后,进入项目目录:

cd my-project

3. 安装和配置 electron-builder

安装electron-builder来处理打包和发布:

vue add electron-builder

4. 运行Electron项目

在安装完所有依赖后,你可以通过以下命令来启动你的Electron应用:

npm run electron:serve

这个命令会启动Electron,并在Vue的开发服务器上运行你的应用。

5. 打包应用

要打包你的Electron应用,可以运行以下命令:

npm run electron:build

这个命令会生成一个适合分发的应用程序包。

可能遇到的问题

  • 解决Electron vue首次启动巨慢无法加载

参考文章:解决Electron vue-cli3.0+首次启动巨慢无法加载 vue-devtool 插件
首次启动可能会等待很久,出现以下信息:

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times

如图

在这里插入图片描述

解决方案:

找到background.js,将下面代码注释:

// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
  • 执行npm run electron:build打包慢

如果遇到执行打包命令反应很慢,如下
在这里插入图片描述
具体代码是:

electron-builder  version=22.14.13 os=10.0.22000 • description is missed in the package.json  appPackageFile=C:\Users\16566\Desktop\demo\my-project\dist_electron\bundled\package.json·• author is missed in the package.json  appPackageFile=C:\Users\16566\Desktop\demo\my-project\dist_electron\bundled\package.json• writing effective config  file=dist_electron\builder-effective-config.yaml• packaging       platform=win32 arch=x64 electron=11.5.0 appOutDir=dist_electron\win-unpacked• downloading     url=https://github.com/electron/electron/releases/download/v11.5.0/electron-v11.5.0-win32-x64.zip size=78 MB parts=8• canceling       signal=interrupt• cancelled by SIGINT• downloaded      url=https://github.com/electron/electron/releases/download/v11.5.0/electron-v11.5.0-win32-x64.zip duration=1m11.907s• cannot unpack electron zip file, will be re-downloaded  error=zip: not a valid zip file

解决方法如下:
参考文章:electron-builder 打包过慢解决
在这里插入图片描述
上图这个目录下找到这个文件 将以下内容粘贴进去就可以了

registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node/
sass_binary_site=https://registry.npmmirror.com/node-sass
phantomjs_cdnurl=https://registry.npmmirror.com/phantomjs
chromedriver_cdnurl=https://registry.npmmirror.com/-/binary/chromedriver/
operadriver_cdnurl=https://registry.npmmirror.com/-/binary/operadriver/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false
  • 如何设置打包的logo、设置exe图标

参考文章:
electron打包应用logo及名称更改
5 分钟配置好 Electron 应用的图标
Electron 打包安装包 更换系统图标(Windows)

可能使用的工具:
图片转ICO、ICO图标生成

准备好图标文件icon.png,然后在background.js 中 找到并添加一行代码

const win = new BrowserWindow({width: 1200,height:800,webPreferences: {// Use pluginOptions.nodeIntegration, leave this alone// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more infonodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,},icon: __dirname + '/icon.png' // 设置应用图标路径
});

添加后的文件代码:

在这里插入图片描述

再次执行打包命令 打包后的logo就更换好了

在这里插入图片描述

  • 设置页面程序的大小、窗口大小

在background.js中找到width与height 就是窗口的大小

在这里插入图片描述

  • 如何设置打开窗口的名称/标题

在background.js中添加代码,如下图

在这里插入图片描述
添加后的效果图

在这里插入图片描述

  • 如何设置打包后exe的名称

第一种方法:找到package.json文件 添加下面代码

  "productName": "阿德泰产线负载测试-v1.0.1-adt-1200tk4",

添加代码后的文件图

在这里插入图片描述
第二种方法:找到vue.config.js 文件添加下面代码
参考文章:vue+electron-builder打包桌面应用程序改变其名字

module.exports = {runtimeCompiler: true,pluginOptions: {electronBuilder: {        builderOptions: { 'productName': '芯片测试数据分析'//此处表示打包后的桌面应用程序的名字,可以是中文}}},
}

添加代码后的文件图

在这里插入图片描述
这样打包后的文件名就是按照自定义的了

其他注意事项

  • 主进程和渲染进程:在使用Vue.js时,注意将UI相关的逻辑放在渲染进程中,而业务逻辑可以放在Electron的主进程中。
  • 调试:你可以使用Chrome DevTools调试渲染进程中的Vue.js代码。electron-builder 也支持热重载功能,可以方便地进行调试。
  • Vuex 和 Vue Router:vue-cli-plugin-electron-builder 支持Vuex和Vue Router,适用于构建复杂的Electron应用。

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

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

相关文章

grid布局实现移动端H5响应式排列正方形格子布局

grid布局实现移动端H5响应式排列正方形区域 grid布局:CSS Grid 网格布局教程在 CSS 中,padding-top 的百分比值是相对于元素自身的宽度,而不是高度。这是 CSS 规范中的一个特性,所有的 padding 和 margin 的百分比值都是相对于元…

客服系统简易版

整体架构解读 客服端和商城端都通过websocket连接到客服系统, 并定期维持心跳当客户接入客服系统时, 先根据策略选择在线客服, 然后再发送消息给客服 websocket实现 用netty实现websocket协议, 增加心跳处理的handler, 详见chat-server模块 客服路由规则 暂时仅支持轮询的…

python 和C通过共享内存通信

C 接收数据 #include <stdio.h> #include <stdlib.h> #include <sys/shm.h> #include <string.h> #include <time.h> #include <sys/time.h>#define SHAERD_MEM_SIZE 20 * 1024 * 1024 // 20MBytes #define ImgWidth 1024 #define ImgHeig…

上新!Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRGRU-Attention分位数回归门控循环单元注意力机制的时间序列区间预测模型&#xff1b; 2.多图输出、多指标输出(MAE、RMSE、MSE、R2)&#xff0c;多输入单输出&#xff0c;含不同置信区间图、概率…

出现Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错

目录&#xff1a; bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty报错解决方法 bug Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are requiredProperty 报错 在一个springboot demo启动的时候出现以下错误 &#xff0c;…

中国城市经济韧性数据集(2007-2022年)

数据来源&#xff1a;数据来自历年《中国城市统计NJ》、各省市《统计NJ》及《中国区域经济统计NJ》 时间范围&#xff1a;2007-2022年 数据范围&#xff1a;中国地级市样例数据&#xff1a; 包含内容&#xff1a; 全部内容下载链接&#xff08;原始数据计算代码最终数据&…

大数据基础:离线与实时数仓区别和建设思路

文章目录 离线与实时数仓区别和建设思路 一、离线数仓与实时数仓区别 ​​​​​​​二、实时数仓建设思路 离线与实时数仓区别和建设思路 ​​​​​​​一、离线数仓与实时数仓区别 离线数据与实时数仓区别如下&#xff1a; 对比方面 离线数仓 实时数仓 架构选择 传…

zdppy+vue3+onlyoffice文档管理系统实战 20240829上课笔记 Python验证码框架完成

遗留的问题 还没有测试校验的功能 测试校验验证码的功能 生成验证码 from .tobase64 import get_base64 from .validate import is_captchadef captcha(api, cache, num4, expire60):""":param cache: 缓存对象:param num: 验证码的个数:param expire: 验证…

【软考】网络安全控制技术

目录 1. 说明2. 防火墙技术3. 加密技术4. 用户识别技术5. 访问控制技术6. 网络反病毒技术7. 网络安全漏洞扫描技术8.入侵检测技术9.例题 1. 说明 1.为了保护网络信息的安全可靠&#xff0c;除了运用法律和管理手段外&#xff0c;还需依靠技术方法来实现。2.网络安全控制技术目…

C++系列-STL容器之vector

STL概念 vector基本概念vector与数组的区别vector容器的特点动态大小连续存储自动扩容尾部操作高效 vector动态扩展的含义vector常用的接口示意 vector的构造函数vector赋值操作重载赋值assign赋值 vector的容量和大小vector的插入和删除vector数据存取vector互换容器vector互换…

Apache RocketMQ 批处理模型演进之路

作者&#xff1a;谷乂 RocketMQ 的目标&#xff0c;是致力于打造一个消息、事件、流一体的超融合处理平台。这意味着它需要满足各个场景下各式各样的要求&#xff0c;而批量处理则是流计算领域对于极致吞吐量要求的经典解法&#xff0c;这当然也意味着 RocketMQ 也有一套属于自…

从开题到答辩:ChatGPT超全提示词分享!(上)【建议收藏】

在浩瀚的知识领域中&#xff0c;提问的艺术是探索真理的钥匙。在这个信息爆炸的时代&#xff0c;深入探索知识的海洋&#xff0c;不仅需要热情和毅力&#xff0c;更需要正确的方法和工具。学术研究是一个复杂而严谨的过程&#xff0c;涉及从选题、文献综述到研究设计、数据收集…

Spring Boot常用注解及其含义

Spring Boot常用注解及其含义 注解含义SpringBootApplication标记主应用程序类&#xff0c;包含Configuration、EnableAutoConfiguration和ComponentScan。EnableAutoConfiguration启用Spring Boot的自动配置功能&#xff0c;根据类路径中的依赖自动配置应用程序。Configurati…

最新高仿拼夕夕源码/拼单系统源码/拼单商城/类目功能齐全

源码简介&#xff1a; 高仿拼夕夕源码&#xff0c;拼单商城系统源码、拼团商城源码&#xff0c;改的版本。拼夕夕拼团商城系统源码源码 多商户多区域拼团系统源码。 自己改的版本&#xff0c;类似于拼单的商城&#xff0c;功能齐全&#xff0c;看着还挺不错&#xff0c;绝对值…

能源与节能

期刊名称&#xff1a; 能源与节能 国内统一刊号(CN)&#xff1a; CN 14-1360/TD 国际标准刊号(ISSN)&#xff1a;ISSN 2095-0802 栏目设置&#xff1a;本刊特稿能源产业节能减排技术研究实践运用 征稿简则 本刊围绕科技发展规划和科技政策&#xff0c;刊登煤炭、石油、天然气…

macos 10.15 catalina xcode 下载和安装

在macos 10.15 catalina系统中, 由于系统已经不再支持,所以我们无法通过应用商店来安装xcode, 需要手动下载指定版本的 xcode 版本才能安装, catalina 支持的最新xcode版本为 Xcode v12.4 (12D4e) , 其他的新版本是无法安装在Catalina系统中的. Xcode_12.4.xip下载地址 注意,下…

git-命名规范

目录 压轴&#xff1a;压箱底的东西 博客几乎没人说这个&#xff0c;属于不可外传的东西。过段时间&#xff0c;我也会进行访问限制&#xff0c;毕竟&#xff0c;掌握人越少竞争压力越小&#xff0c;我也怕&#xff0c;请删谨慎保存。 分支命名策略&#xff1a; Git分支命名的…

RocketMQ第5集

一 RocketMQ的工作流程 1.1 生产环节producer Producer可以将消息写入到某Broker中的某Queue中&#xff1a;其中Producer发送消息之前&#xff0c;会先向NameServer发出获取消息Topic的路由信息的请求&#xff0c;NameServer返回该Topic的路由表及Broker列表。简单的说&…

火爆硅谷的“AI原生”代码编辑器Cursor使用体验

简单总结下&#xff1a; 如果现在你有需要改动到代码、有需要迅速了解一个开源项目的代码逻辑、或者对代码一直没有入门想要学习的话&#xff1a; 现在&#xff01;立刻&#xff01;马上&#xff01;下载体验使用cursor&#xff01;It‘s a life-saving decision&#xff01;…

排序算法见解(2)

1.快速排序 1.1基本思想&#xff1a; 快速排序是通过一趟排序将待排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据都比另一部分的所有数据都要小&#xff0c;然后再按此方法对这两部分数据分别进行快速排序&#xff0c;整个排序过程可以递归进行&#xff0c;以…