vue3+vite中使用electron

要在Vue3和Vite项目中使用Electron，需要进行以下步骤：

1. 安装Electron

使用npm或者yarn安装Electron：

npm install --save-dev electron

2. 创建Electron主进程

在项目根目录下创建一个main.js文件，作为Electron的主进程。在该文件中，需要引入Electron，并创建一个BrowserWindow实例。

main.js的示例代码：

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载Vite生成的页面
  win.loadURL('http://localhost:3000')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3. 修改Vite配置文件

在Vite项目的根目录下，需要创建一个vite.config.js文件，并在其中添加以下内容：

const { defineConfig } = require('vite')
const { resolve } = require('path')
const { createElectronRendererConfig } = require('@forge/plugin-vue')

module.exports = defineConfig({
  build: {
    target: 'esnext',
    outDir: 'dist/renderer',
    emptyOutDir: true,
    assetsDir: 'assets',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      }
    }
  },
  plugins: [
    createElectronRendererConfig({
      // 更改Electron的主进程的文件路径
      mainProcessFile: resolve(__dirname, 'main.js')
    })
  ]
})

4. 运行项目

在终端中运行以下命令，启动Vite服务：

npm run dev

然后，在另一个终端中，运行以下命令，启动Electron：

npm run electron

现在，你就可以在Electron中看到你的Vue3+Vite应用程序了。