基于Electron24+Vite4+Vue3搭建桌面端應用
一說到創(chuàng)建桌面應用，就不得不提及Electron和Tauri框架。這次給大家主要分享的是基于electron最新版本整合vite4.x構建vue3桌面端應用程序。
之前也有使用vite2+vue3+electronc創(chuàng)建桌面端項目，不過 vue-cli-plugin-electron-builder 腳手架插件構建的項目electron版本只有13.x。如今electron版本都到了24，顯然不能再用之前的方法創(chuàng)建項目了。于是閑暇時間就搗鼓了electron24+vite4搭建桌面程序，中間踩了不少坑，現記錄如下，希望對大家有所幫助~~
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
Electron35-DeepSeek桌面端AI系統(tǒng)|vue3.5+electron+arco客戶端ai模板
版本信息
vite: ^4.3.2 vue: ^3.2.47 electron: ^24.4.0 electron-builder: ^23.6.0
創(chuàng)建vite4+vue3項目
vite官網提供了npm/yarn/pnpm等方式創(chuàng)建vue3項目。
yarn create vite electron-vite4-vue3 cd electron-vite4-vue3 yarn install yarn dev
到這里一個簡單的vite3+vue3項目就初始化好了。
安裝Electron及相關依賴包
基礎vue3項目創(chuàng)建好后，需要在項目中安裝一些electron依賴的包。如果在安裝過程中卡住或失敗，建議切換淘寶鏡像，使用cnpm安裝。
# 安裝electron yarn add -D electron
# 安裝electron-builder 用于打包可安裝exe程序和綠色版免安裝exe程序 yarn add -D electron-builder
# 安裝electron-devtools-installer 用于開發(fā)調試electron yarn add -D electron-devtools-installer
到這一步還需要安裝一個構建electron程序的vite插件 vite-plugin-electron
yarn add -D vite-plugin-electron
vite-plugin-electron ：用于構建electron應用程序的vite插件。僅需少量配置，即可快速整合vite electron開發(fā)環(huán)境。
該插件集成了Vite和Electron，方便在渲染進程中使用Node API或者Electron API功能。
https://github.com/electron-vite/vite-plugin-electron
新建主進程文件
在項目根目錄新建background.js文件，編寫主進程代碼。
const { app, BrowserWindow } = require('electron')
const { join } = require('path')
// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const createWindow = () => {
const win = new BrowserWindow({
// 窗口圖標
icon: join(__dirname, 'resource/shortcut.ico'),
width: 800,
height: 600,
webPreferences: {
// contextIsolation: false,
// nodeIntegration: true,
// preload: path.join(__dirname, 'preload.js')
}
})
// 加載vue url視本地環(huán)境而定，如http://localhost:5173
// win.loadURL('http://localhost:3000')
// development模式
if(process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
// 開啟調試臺
win.webContents.openDevTools()
}else {
win.loadFile(join(__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()
})
接下來在vite.config.js中引入vite-plugin-electron插件，配置主進程入口，將electron和vite項目結合起來。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
electron({
// 主進程入口文件
entry: 'background.js'
})
],
/*開發(fā)服務器選項*/
server: {
// 端口
port: 3000,
}
})
如果到這一步，運行yarn dev會報錯，需要在package.json文件中加入 "main": "background.js" 入口配置。
如果報錯如下，需要去掉package.json文件中 "type": "module" 配置。
完整的package.json配置如下
{ "name": "electron-vite4-vue3", "private": true, "version": "0.0.0", "description": "基于Electron24+Vite4.x+Vue3搭建項目框架", "author": "andy <282310962@qq.com>", "copyright": "MIT License(MIT) ?2023 Andy", "main": "background.js", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "electron:serve": "vite --host", "electron:build": "vite build && electron-builder" }, "dependencies": { "vue": "^3.2.47" }, "devDependencies": { "@vitejs/plugin-vue": "^4.1.0", "electron": "^24.4.0", "electron-builder": "^23.6.0", "electron-devtools-installer": "^3.2.0", "vite": "^4.3.2", "vite-plugin-electron": "^0.11.2" } }
到這里，yarn dev啟動項目，就能成功運行了。
electron-builder打包配置
項目已經運行起來了，接下來就需要配置一些electron-builder打包腳本了。在項目根目錄新建electron-builder.json配置文件。
話不多說，直接上代碼：
{ "productName": "ElectronVite4Vue3", "appId": "cc.xiaoyan.electron-vite4-vue3", "copyright": "Copyright ? 2023-present Andy", "compression": "maximum", "asar": true, // 打包格式壓縮 "directories": { "output": "release/${version}" // 打包輸出目錄 }, // 配置extraResources后，electron-builder會在打包時將extraResources中指定的文件復制到打包后應用程序的根目錄/resources文件夾下 /*"extraResources": [ { "from": "./resource", "to": "resource" } ],*/ "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "ElectronVite4Vue3" }, "win": { "icon": "./resource/shortcut.ico", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}", "target": [ { "target": "nsis", "arch": ["ia32"] } ] }, "mac": { "icon": "./resource/shortcut.icns", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" }, "linux": { "icon": "./resource", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" } }
打包構建
yarn electron:build
圖標等資源文件放在resource目錄下
打包后顯示的任務欄及程序圖標。
打包程序圖標配置
窗口圖標配置
主進程中的__dirname變量指向當前主進程文件的目錄。
至此一個簡易版的electron24+vite4跨端項目就搭建好了，至于主進程/渲染進程之間的通訊后續(xù)再分享哈~~
附上三個最新原創(chuàng)自研Vue3+Electron桌面端實戰(zhàn)項目。
Electron32-ViteOS桌面版os系統(tǒng)|vue3+electron+arco客戶端OS管理模板
浙公網安備 33010602011771號
UP主小店