vue3+vite项目引入electron运行为桌面项目

一、安装electron

npm install --save-dev electron

二、项目根目录添加electron文件

在此文件夹中添加两个js文件：main.js、preload.js

main.js:

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.mainWindow.loadFile('index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()
}// 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()app.on('activate', function () {// 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()})
})// 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()
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.js:

/*** The preload script runs before `index.html` is loaded* in the renderer. It has access to web APIs as well as* Electron's renderer process modules and some polyfilled* Node.js functions.** https://www.electronjs.org/docs/latest/tutorial/sandbox*/
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}
})

三、配置package.json文件

删除：“type”: “module”
添加：“main”: “electron/main.js”,
添加：“start”: “electron .”

示例：

{"name": "electron_vue3","private": true,"version": "0.0.0","main": "electron/main.js","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview","start": "electron ."},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@types/node": "^22.10.10","@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","electron": "^34.0.1","typescript": "~5.6.2","vite": "^6.0.5","vue-tsc": "^2.2.0"}
}

四、运行

// 运行为桌面项目
npm run start// 运行为网页
npm run dev