Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载

一. 简介

在上一篇文章Vite+Electron快速构建一个VUE3桌面应用中,我们了解了如何使用ViteElectron来快速构建一个Vue3桌面应用。但是,之前构建的应用仅仅是一个简单的版本。在开发过程中,为了更好的开发体验,在开发electron的时候,肯定也希望能有动态模块热重载(HMR),更别说vite那迅雷不及掩耳盗铃儿响叮当之势的加载速度。

因此,接着上一篇文章所完成的项目代码,我们来完成ViteElectron开发时的动态模块热重载功能。


二. 思路

先说结论,可利用electron中的mainWindow.loadURL(<your-url>)来实现。

对于动态模块热重载功能来说,无论是webpack还是vite,其都是将构建内容存入内存,因此我们无法使用mainWindow.loadFile('dist/index.html')这样加载文件的方式。

但是,单纯地改变该配置也是不行的,需要使用vite将开发服务器运行起来,可以正常运行动态模块热重载,而electron直接加载其开发服务器可访问的url,即http://localhost:3000


三. 实现步骤

1. 编辑main.js

mainWindow.loadFile('dist/index.html')更新为mainWindow.loadURL("http://localhost:3000"),更新后的文件如下所示:

// main.js// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.html// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行,加载urlmainWindow.loadURL("http://localhost:3000")// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。

2. 编辑vite.config.js

修改文件vite.config.jsbase,修改后的文件如下所示:

// vite.config.jsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base: "./",	// 新增plugins: [vue()]
})

3. 同时开启vite和electron服务

为了使vite和electron正常运行,需要先运行vite,使得其开发服务器的url可以正常访问,然后再开启electron去加载url。

此处需要安装两个库:

  • concurrently:阻塞运行多个命令,-k参数用来清除其它已经存在或者挂掉的进程
  • wait-on:等待资源,此处用来等待url可访问

首先来安装。

yarn add -D concurrently wait-on

接着更新文件package.jsonscripts新增两条命令:

"scripts": {"electron": "wait-on tcp:3000 && electron .","electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""},

更新后完整内容如下:

{"name": "kuari","version": "0.0.0","main": "main.js","scripts": {"dev": "vite","build": "vite build","serve": "vite preview","electron": "wait-on tcp:3000 && electron .","electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""},"dependencies": {"vue": "^3.2.16"},"devDependencies": {"@vitejs/plugin-vue": "^1.9.3","concurrently": "^6.3.0","cross-env": "^7.0.3","electron": "^15.1.2","vite": "^2.6.4","wait-on": "^6.0.0"}
}

四. 运行

现已添加两条命令:

  • yarn electron为等待tcp协议3000端口可访问,然后执行electron
  • yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令

运行项目只要执行命令yarn electron:serve即可,当修改项目文件时,桌面应用也将自动更新。

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

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

相关文章

博弈论(牛客练习赛)

思路&#xff1a;我们考虑小念赢 1、如果n>1并且p0&#xff0c;小念可以连续取两次&#xff0c;相当于小念有挂&#xff0c;可以从必败态转为必胜态&#xff0c;必赢。 2、如果n>1并且m>n-1&#xff0c;小念第一次取n-1个&#xff0c;小念必赢。 代码&#xff1a; …

【C语言】(1)初识C语言

什么是C语言 C语言是一种广泛应用的计算机编程语言&#xff0c;它具有强大的功能和灵活性&#xff0c;使其成为系统编程和底层开发的首选语言。C语言的设计简洁、高效&#xff0c;且不依赖于特定的硬件或系统&#xff0c;因此在各种计算平台上都能稳定运行。 C语言的特点 高…

C++ 之LeetCode刷题记录(十九)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 依旧是追求耗时0s的一天。 108. 将有序数组转换为二叉搜索树 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你…

针对于vue element-plus组件的el-date-picker日期区间组件的日期格式问题以及如何进行区间判断

<template><el-date-picker v-model"value1" type"daterange" range-separator"To" start-placeholder"开始日期" end-placeholder"结束日期" :size"size" change"sarend" /> </templat…

速盾:海外网站CDN加速建站有哪些优势?

随着互联网的发展&#xff0c;海外网站的建设和访问需求也日益增加。而为了提高海外网站的访问速度和用户体验&#xff0c;CDN加速技术成为了一种必不可少的解决方案。本文将介绍海外网站CDN加速建站的优势&#xff0c;并回答一些相关问题。 一、提高网站访问速度 海外网站部署…

C#学习笔记_数组

数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合&#xff0c;通常认为数组是一个同一类型变量的集合。 声明数组 一、一维数组 一维数组声明语法如下&#xff1a; datatype[] arrayName; 其中&#xff0c;datatype为数据类型&#xff0c;array…

844.比较含退格的字符串(力扣LeetCode)

844.比较含退格的字符串 题目描述 给定 s 和 t 两个字符串&#xff0c;当它们分别被输入到空白的文本编辑器后&#xff0c;如果两者相等&#xff0c;返回 true 。# 代表退格字符。 注意&#xff1a;如果对空文本输入退格字符&#xff0c;文本继续为空。 示例 1&#xff1a;…

泽众云真机-机型集中化运维方案升级全面完成

2024年元月份&#xff0c;泽众云真机运维团队&#xff0c;经过几个月软硬件多轮安装调试&#xff0c;机型集中化运维方案升级全面完成。解决了云真机的机型集中化运维难题&#xff0c;方便了运营人员手机管理。 具体如下&#xff1a; 1、集中化运维&#xff0c;如服务器、PC、…

中级ccnp多久可以考下来?ccnp 课件哪里有?

思科中级CCNP考试要求考生具备一定的网络基础知识&#xff0c;包括IP地址规划、VLAN配置、STP协议等。然而&#xff0c;对于许多初学者来说&#xff0c;中级CCNP考试的难度和门槛都是一个不小的挑战。那么&#xff0c;究竟需要多久才能考下中级CCNP证书呢?下面将为你详细解读。…

esp32 操作DS1307时钟芯片

电气参数摘要 有VCC供电&#xff0c;IIC活动状态是1.5mA&#xff0c;待机状态200μA&#xff0c;电池电流5nA(MAX50nA&#xff09;无VCC供电的时候&#xff0c;电池电流&#xff0c;300nA&#xff08;时钟运行&#xff09;&#xff0c;10nA&#xff08;时钟停止&#xff09;供…

Compose中添加Android原生控件

文章目录 一、前言二、示例代码三、AndroidView的注意事项四、参考链接 一、前言 Compose自身组件有时候并不能完全满足要求&#xff0c;这里演示如何在Compose中添加原生组件及其注意事项 二、示例代码 Composablefun AndroidTextView(modifier: Modifier) {AndroidView(mod…

机器学习-pandas(含数据)

pandas 优势&#xff1a; 增强图表可读性便捷的数据处理能力读取文件方便封装了Matplotlib、Numpy的画图和计算 更详细的教程&#xff1a;Pandas 教程 | 菜鸟教程 (runoob.com) Pandas数据结构 Pandas中一共有三种数据结构&#xff0c;分别为&#xff1a;Series、DataFram…

SpringMVC-拦截器

文章目录 拦截器一、SpringMVC配置文件二、三个抽象方法 拦截器 一、SpringMVC配置文件 <!-- 配置拦截器--><mvc:interceptors><mvc:interceptor><mvc:mapping path"/**"/> <!---拦截的路径--><mvc:exclude-mapping path&qu…

Vite+Electron快速构建一个VUE3桌面应用(一)

一. 简介 首先&#xff0c;介绍下vite和Electron。 Vite是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium和Node.js到二进制的 Electron 允许您保持一个 JavaScript 代码代码…

Docker 容器内运行 mysqldump 命令来导出 MySQL 数据库,自动化备份

备份容器数据库命令&#xff1a; docker exec 容器名称或ID mysqldump -u用户名 -p密码 数据库名称 > 导出文件.sql请替换以下占位符&#xff1a; 容器名称或ID&#xff1a;您的 MySQL 容器的名称或ID。用户名&#xff1a;您的 MySQL 用户名。密码&#xff1a;您的 MySQL …

3dmax效果图渲染出现曝光怎么解决?

在使用3ds Max完成效果图渲染工作时&#xff0c;有时会遇到曝光过度的问题&#xff0c;这会使得渲染的图像出现光斑或者过亮&#xff0c;损害了效果的真实感和美观度。那么解决解决3dmax曝光问题呢&#xff1f;一起看看吧&#xff01; 3dmax效果图渲染出现曝光解决方法 1、相机…

国控创科安徽公司年会思语

国控创科安徽公司年会思语 望尽苍穹知大小&#xff0c;做好本我懂多少。 ​年终总结明比较&#xff0c;践行计划得俊俏。

TestNG @AfterClass 注解

目录 那么&#xff0c;这个AfterClass注释的方法什么时候执行呢&#xff1f; 那么&#xff0c;我们可以在一个类中放置多个AfterClass注释方法吗&#xff1f; AfterClass注释放在超类上时如何工作&#xff1f; 在这篇文章中&#xff0c;我们将讨论TestNG中的AfterClass注释。…

STL-内建函数对象

算术仿函数关系仿函数逻辑仿函数这些仿函数所产生的对象&#xff0c;用法和一半函数完全相同使用这些内建函数对象&#xff0c;需要引入头文件#include 1 实现四则运算 其中negate是一元运算&#xff0c;其他都是二元运算 仿函数原型&#xff1a; template T plus //加法仿函数…

鸿蒙HarmonyOS获取GPS精确位置信息

参考官方文档 #1.初始化时获取经纬度信息 aboutToAppear() {this.getLocation() } async getLocation () {try {const result await geoLocationManager.getCurrentLocation()AlertDialog.show({message: JSON.stringify(result)})}catch (error) {AlertDialog.show({message…