Uniapp+Vite+Vue3+Electron 快速构建桌面应用(二)---实现模块热更新重载

上一篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用
下一篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用(三)—打包

一. 思路

利用electron中的 mainWindow.loadURL() 来实现。

只需要将uniapp项目运行起来，就可以正常运行动态模块热重载，再配合上electron直接加载其开发服务器可访问的url，如:http://localhost:3000。

二. 实现

1. 编辑 electron/main.js

// main.js 中内容如下const { app, BrowserWindow } = require('electron')
const createWindow = () => {const win = new BrowserWindow({width: 1200,height: 800,})// 注意: 该路径为 npm run dev:h5 运行后开启的本地服务 根据实际情况修改win.loadURL('http://localhost:3000') // 有改动 新增// win.webContents.openDevTools() // 开启调试工具
}
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

2. 同时开启 vite 和 electron 服务

为了使vite和electron正常运行，需要先运行vite，获取开发服务器的url，然后再开启electron去加载url。

此处需要安装工具两个库：

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

npm install -D concurrently wait-on

接着更新文件 package.json，scripts 新增两条命令：

"scripts": {"electron": "wait-on tcp:3000 && electron .", // 3000需根据实际端口修改"serve:electron": "concurrently -k \"npm run dev:h5\" \"npm run electron\"",...},

3. 运行

npm run serve:electron

这个时候我们发现 当修改uniapp项目文件时，桌面应用也将自动更新。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！