Vite + Vue3 + Electron实现进程通信

Vite + Vue3 + Electron实现进程通信

实现 渲染进程 / 主进程 通信(IPC)

Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架,而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中,Electron 提供了强大的桌面应用开发能力,而 Vue3 则提供了易用的 UI 组件和开发体验
Electron 内置了 Chromium 和 Node.js:
Chromium 是渲染进程,用于渲染、解析 HTML
Node.js 是主进程
渲染进程 / 主进程,使用 IPC 进行通信

让 Vite 支持 ipcRenderer

使用 ipcRenderer 进行通信 默认情况下,Vite 不支持 ipcRenderer,得安装插件 vite-plugin-electron-renderer 让他支持

安装 vite-plugin-electron 的时候,就已经同时安装了 vite-plugin-electron-renderer,所以不用重复安装他,直接引入就行

修改 vite.config.ts,不改会报错:Error: Module “path” has been externalized for browser compatibility. Cannot

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import electron from "vite-plugin-electron"
import electronRenderer from "vite-plugin-electron-renderer" 
import polyfillExports from "vite-plugin-electron-renderer"  

export default defineConfig(({ mode }) => ({
  base: mode == 'development' ? '' : './',
  plugins: [
    vue(),
    electron([{
      entry: "electron-main/index.ts", // 主进程文件
    },
    {
      entry: 'electron-preload/preload.ts'
    }
  ]),
    electronRenderer(),
    polyfillExports(),
  ],
  build: {
    emptyOutDir: false, // 默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录
    outDir: "dist-electron"
  },
}))

这样,就实现了让 Vite 支持 ipcRenderer

渲染进程发送消息,主进程接收消息

  1. 渲染进程使用 ipcRenderer.send() 发送消息

在 vue 文件中,添加一个按钮,点击后通过 ipcRenderer 给主进程发消息

import { ipcRenderer } from 'electron'
 
const send = () => {  
//渲染信息给主线程发送消息
  ipcRenderer.send('message',123456)
}

Vite + Vue3 + Electron实现进程通信_第1张图片

  1. 主进程使用 ipcMain.on() 接收消息
    在 electron / index.ts 文件中,引入 ipcMain,监听 .vue 文件发出的消息

import { app, BrowserWindow, ipcMain } from 'electron'
 
// 这段代码在 createWindow 创建窗口函数内执行
ipcMain.on('message', (_,num) => {
  console.log(num,'收到')
})

Vite + Vue3 + Electron实现进程通信_第2张图片

主进程发送消息,渲染进程接收消息

主进程发送消息,渲染进程接收消息

//打开调试工具
  win.webContents.openDevTools()
// 这段代码在 createWindow 创建窗口函数内执行
ipcMain.on('message', (_,num) => {
  console.log(num,'收到')
})
setTimeout(() => {
  win!.webContents.send('load', { message: "electron初始化了" })
}, 1000);

Vite + Vue3 + Electron实现进程通信_第3张图片

Vite + Vue3 + Electron实现进程通信_第4张图片

渲染进程通过 ipcRenderer.on() 接收主进程发来的消息,会在控制台输出

//接收(渲染进程通过 ipcRenderer.on() 接收主进程发来的消息)
ipcRenderer.on('load', (_, message) => {
  console.log(message, 123)
})

Vite + Vue3 + Electron实现进程通信_第5张图片

参考视频

小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili 小满Vue3(第三十九章
electron桌面程序)是Vue3 + vite + Ts + pinia + 实战 + 源码
+electron的第51集视频,该合集共计110集,视频收藏或关注UP主,及时了解更多相关视频内容。 https://www.bilibili.com/video/BV1dS4y1y7vd?p=51&vd_source=8bc01635b95dbe8ecd349b2c23b03a10

你可能感兴趣的:(electron,vue.js,前端)