我是把现有的一个vue3项目打包到桌面端的，也可以新建一个项目。

第一步、准备工作

1.打开项目终端输入yarn add electron，安装 electron
2.安装依赖wait-on以及cross-env，yarn add wait-on --dev和 yarn add cross-env --dev

第二步、项目根目录下新建main.js文件

const { app, BrowserWindow } = require('electron');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;
app.commandLine.appendSwitch('allow-file-access-from-files');
function createWindow() {
    console.log('Creating main window...');
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 980,
    height: 680,
    fullscreen: true,
    skipTaskbar: true,
    autoHideMenuBar: true, // 是否自动隐藏菜单栏
    webPreferences: {
      nodeIntegration: true,
     contextIsolation: false, // 同上，根据需要调整
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  if (NODE_ENV === 'development') {
    console.log('Loading development URL...');
    mainWindow.loadURL('http://localhost:3001/');//替换为你的本地地址
    mainWindow.webContents.openDevTools();
  } else {
    console.log('Loading production file...');
   // mainWindow.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`);
   mainWindow.loadFile('dist/index.html'); // 确保路径正确指向你的 HTML 文件
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.

app.whenReady().then(() => {
  createWindow();
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

第三步、项目根目录下新建 preload.js文件

//允许vue项目使用 ipcRenderer 接口, 演示项目中没有使用此功能
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('ipcRender', ipcRenderer);

第四步、修改package.json

1.新增

"main": "main.js",

2.在scripts中新增

"electron:dev": "wait-on tcp:3000 && cross-env NODE_ENV=development electron ./","electron:build": "rimraf dist &&  vite build &&  electron-builder",
    "electron:build2": "electron-builder"

3.删除

"type":"module"

4.新增

"build": {
    "productName": "webim-electron",
    "appId": "com.lvais",
    "copyright": "2023@easemob",
    "directories": {
      "output": "output"
    },
    "extraResources": [
      {
        "from": "./src/assets",
        "to": "./assets"
      }
    ],
    "files": [
      "dist/**/*",
      "electron/**/*",
      "main.js"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true
    },
    "linux": {}
  }

第五步、修改vite.config.js

vite.config.js里面配置

 base: "./",
  build:{
    outDir: 'dist',
    assetsDir: 'assets',
  },

第六步、router下面index.js修改,改为哈希模式

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

第七步、启动项目

1.启动运行原 vue 项目yarn dev
2.新开一个终端执行，输入下方命令启动 electron yarn run electron:dev

第八步、下载electron 打包工具库electron-builder,启动项目

1.yarn add electron-builder --dev
2.build 原始 vue 项目：yarn run build
3.build electron 项目:yarn run electron:build

这样目录下会自动生成output文件，打开之后可以选择双击打开软件验证看下是否可以正常开启应用