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

2024-08-30 00:28
文章标签 javascript exe 应用 项目 桌面 vue 页面 搭建 过程 前端 打包 frontend electron

本文主要是介绍【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应用。

这篇关于【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1119282。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
作业提交过程之HDFSMapReduce

作业提交过程之HDFSMapReduce

作业提交全过程详解 （1）作业提交 第1步：Client调用job.waitForCompletion方法，向整个集群提交MapReduce作业。 第2步：Client向RM申请一个作业id。 第3步：RM给Client返回该job资源的提交路径和作业id。 第4步：Client提交jar包、切片信息和配置文件到指定的资源提交路径。 第5步：Client提交完资源后，向RM申请运行MrAp
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2