Vue3使用Electron的搭架子流程

创建项目

1、搭建vue项目

执行以下命令：
 

npm init vue@latest 

并安装依赖：
 

npm install

运行项目：
 

npm run dev

可以修改端口，修改 vite.config.js 文件的 server.port 选项为你想要的端口号：

export default defineConfig({
  // ...
  server: {
    port: 3004
  }
});

2、安装Electron

执行安装命令：

npm install electron --save-dev

在项目根目录创建electron文件夹，并在文件夹下创建main.js，并添加以下代码：
 

import { app, BrowserWindow, Menu } from 'electron'

// 判断当前应用的开发环境
const isPackaged = app.isPackaged;

// 定义一个变量来存储主窗口的实例
let win;

// 在整个应用中禁用默认菜单栏
Menu.setApplicationMenu(null);

/**
 * 创建并显示主应用窗口。
 * 该函数不接受参数，也没有返回值。
 */
const createWindow = () => {
    // 创建BrowserWindow实例，并设置其属性
    win = new BrowserWindow({
        title: "兰泽-酒店管理系统",
        width: 1000,
        height: 600
    })

    // 如果是开发环境，则打开开发者工具
    if (!isPackaged) {
        win.webContents.openDevTools();
    }

    // 加载应用vue项目的URL
    win.loadURL("http://localhost:5173/");
}


// 等待应用准备就绪，然后调用createWindow函数
app.whenReady().then(() => {
    createWindow()

    // 监听所有窗口关闭的事件。除了macOS外，当所有窗口关闭时退出应用。
    app.on("window-all-closed", () => {
        if (process.platform !== "darwin") app.quit();
    });
})

修改package.json， 指定 electron/main.js 为 Electron 的入口文件，并添加 electron:dev 命令以开发模式运行 Electron：
 

{
  "main": "electron/main.js",
  "scripts": {
    "electron:dev": "electron ."
  }
}

3、项目运行

因为当前项目的运行需要先运行vue项目，再运行electron，比较麻烦，所以我们使用concurrently来合并两条命令：

执行以下命令安装concurrently：

 npm install concurrently --save-dev

修改 package.json 文件中的 electron:dev 命令，同时执行 vite 和 electron . 两个命令，用引号将单独的命令括起来，并使用 \ 转义引号，代码如下：

// package.json
{
  "scripts": {
    "electron:dev": "concurrently vite \"electron .\""
  }
}

这样，只需要执行一条npm run electron:dev就可以运行项目

参考文章：

Electron + Vue3 开发桌面应用_electron vue-CSDN博客