构建vue3项目

构建项目

npm create vite@latest electron-demo

引入electron

npm install electron -D
npm install vite-plugin-electron -D
#渲染进程和主进程的通信
npm install vite-plugin-electron-renderer -D

修改vite.config.js

引入 electron 和 electronRender 进程间通讯

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [
    vue(), electron({
      entry: 'src/electron/index.js'
    }),electronRender()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port:3000
  }
})

创建electron 主进程窗口

src目录下新建/electron/index.js

import path from "path";
const { app, BrowserWindow, ipcMain,shell } = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hidden',
    webPreferences: {
      contextIsolation: false, // 是否开启隔离上下文
      nodeIntegration: true, // 渲染进程使用Node API
      // preload: path.join(__dirname, "../electron-preload/index.js"), // 需要引用js文件
    }
  });
  win.webContents.openDevTools();
  win.setMenu(null)
  // 如果打包了，渲染index.html
  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, "../index.html"));
  } else {
    win.loadURL(process.env['VITE_DEV_SERVER_URL'])
  }

  ipcMain.on('msg', (_, msg) => {
    console.log('渲染进程传递信息 :>> ', msg);
    win.webContents.send('load', { msg: '我已经收到消息' + msg })
  });


};

app.whenReady().then(() => {
  createWindow(); // 创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 关闭窗口
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

页面

<template>
  <div>
    <el-button type="primary" @click="send">按钮</el-button>
  </div>
</template>

<script setup>
import { ipcRenderer } from 'electron'
import { useRouter } from 'vue-router'

const router = useRouter()

const send = () => {
  ipcRenderer.send('msg', '页面消息')
}

const openNewWin = () => {
  ipcRenderer.send('openNewWin')
}

ipcRenderer.on('load', (_, msg) => {
  console.log('主进程传递信息 :>> ', msg)
})

</script>

<style lang="scss" scoped>
</style>

运行

修改package.json

 "main": "dist-electron/index.js",
 "dev": "chcp 65001 && vite"

npm run dev