electron+vite+vue3项目搭建

1.创建项目

npm init vite@latest或者npm create vite）

2.安装electron相关依赖

npm install electron -D
npm install vite-plugin-electron -D 
//常用版本： "vite-plugin-electron": "^0.8.3"； "electron": "^19.0.10",

3.在 vite.config.ts 中，配置 Electron 入口文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import path, { resolve, join } from 'path'
export default defineConfig({
  plugins: [vue(), electron({
    main: {
      // 配置 Electron 入口文件
      entry: "electron/index.js"
    }
  })],
  resolve: {
    alias: {
      "@": resolve(__dirname, 'src'), // 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件
    }
  },
})

4.编写 electron / index.js（electron主要配置）

 
// app 控制应用程序的事件生命周期（相当于应用程序）
// BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）
// screen.getPrimaryDisplay()窗口对象
// ipcMain当在主进程中使用它的时候，它控制着由渲染进程(web page)发送过来的异步或同步消息.从渲染进程发送过来的消息将触发事件.
// Tray一个图标,这个图标处于正在运行的系统的通知区
// Menu设置菜单
import { app, BrowserWindow, screen, ipcMain, Tray, Menu } from 'electron'
import path from 'path'
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
// 定义全局变量，获取窗口实例
const windows = {
    // 主窗口
    main: {
        win: null
    },
    // 登录窗口
    login: {
        win: null
    },
    exit: {
        win: null,
        width: 300,
        height: 200,
    },
}
const INITMENU = 0x116; //当弹出系统菜单时
//禁用窗口自带的右键菜单
function disableContextMenu(win) {
    win.hookWindowMessage(INITMENU, () => {
        win.setEnabled(false);
        setTimeout(() => {
            win.setEnabled(true);
        }, 20);
        return true;
    })
}
 
// 创建主窗口
const createWindow = () => {
    let {
        width,
        height
    } = screen.getPrimaryDisplay().workArea;
    windows.main.win = new BrowserWindow({
        width: width,
        height: height,
        show: true, //先不显示窗口，等窗口准备好了才显示，防止渲染未完成时出现白框
        frame: false,
        movable: true,
        resizable: true,
        webPreferences: {
            devTools: true,
            // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
            nodeIntegration: true,
            contextIsolation: false,
            webSecurity: false, //是否允许渲染进程访问本地文件
            //允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
        }
    })
    // 开发环境 development
    // 是生产环境 production
    if (process.env.NODE_ENV != 'development') {
        console.log(1)
        windows.main.win.loadFile(path.join(__dirname, "../index.html"));
        // win.webContents.openDevTools();
    } else {
        console.log(2)
        windows.main.win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}` + "/index.html");
        if (!process.env.IS_TEST) windows.main.win.webContents.openDevTools();
    }
    disableContextMenu(windows.main.win);
}
//托盘区图标
var appTray = null;
function setTray() {
    //设置菜单内容
    let trayMenu = [{
        label: '退出', //菜单名称
        click: function () { //点击事件
            app.quit();
        }
    }];
    let trayIcon = null;
    //设置托盘区图标
    if (process.env.NODE_ENV != 'development') {
        trayIcon = path.join(__dirname, '../favicon.ico');
    } else {
        trayIcon = path.join(__dirname, '../../public/favicon.ico');
    }
    appTray = new Tray(trayIcon);
    //设置菜单
    const contextMenu = Menu.buildFromTemplate(trayMenu);
    //设置悬浮提示
    appTray.setToolTip('数据校验软件');
    //设置
    appTray.setContextMenu(contextMenu);
    //点击图标
    appTray.on('click', function () {
        //显示主程序
        if (windows.main.win) windows.main.win.show();
    });
}
// app.on('activate', () => {
//     console.log(333)
//     // On macOS it's common to re-create a window in the app when the
//     // dock icon is clicked and there are no other windows open.
//     if (BrowserWindow.getAllWindows().length === 0) createWindow()
// })
// 初始化app（在 Electron 完成初始化时触发）
app.whenReady().then(() => {
    createWindow();
    setTray();
    addIpc()
});
 
const addIpc = () => {
    // 最小化
    ipcMain.on('min-app', () => {
        windows.main.win.minimize();
    });
    // 退出程序
    ipcMain.on('recome', () => {
        windows.main.win.close();
    })
}

5.在 package.json 中，增加 main 字段，去掉 type 字段

 "main": "dist/electron/index.js",

6.运行项目即可打开窗口

npm run dev