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

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

一. 思路

利用electron中的 mainWindow.loadURL(<your-url>) 来实现。

只需要将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项目文件时，桌面应用也将自动更新。