旧vue3项目集成electron

美酒没故事°2025-09-29 9:14

安装依赖

npm i electron -D
npm i vite-plugin-electron -D

配置项目启动入口

bash 复制代码

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

配置插件

vite.config.js

bash 复制代码

import electron from 'vite-plugin-electron/simple'




electron({
  main: {
        entry: 'electron/main.js',
    },
    preload: {
        input: 'electron/preload.js',
    },
}),

创建electron配置文件

手动创建electron目录 => main.js文件：

javascript 复制代码

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

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

  // 加载本地开发服务器或打包后的 dist 文件
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  } else {
    win.loadFile(path.resolve(__dirname, '../dist/index.html'))
  }
}

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

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

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

启动项目

npm run dev