基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實(shí)戰(zhàn)教程
一說(shuō)到創(chuàng)建桌面應(yīng)用，就不得不提及Electron和Tauri框架。這次給大家主要分享的是基于electron最新版本整合vite4.x構(gòu)建vue3桌面端應(yīng)用程序。
之前也有使用vite2+vue3+electronc創(chuàng)建桌面端項(xiàng)目，不過(guò)vue-cli-plugin-electron-builder腳手架插件構(gòu)建的項(xiàng)目electron版本只有13.x。如今electron版本都到了24，顯然不能再用之前的方法創(chuàng)建項(xiàng)目了。于是閑暇時(shí)間就搗鼓了electron24+vite4搭建桌面程序，中間踩了不少坑，現(xiàn)記錄如下，希望對(duì)大家有所幫助~~
版本信息
vite: ^4.3.2 vue: ^3.2.47 electron: ^24.4.0 electron-builder: ^23.6.0
創(chuàng)建vite4+vue3項(xiàng)目
vite官網(wǎng)提供了npm/yarn/pnpm等方式創(chuàng)建vue3項(xiàng)目。
yarn create vite electron-vite4-vue3 cd electron-vite4-vue3 yarn install yarn dev
到這里一個(gè)簡(jiǎn)單的vite3+vue3項(xiàng)目就初始化好了。
安裝Electron及相關(guān)依賴包
基礎(chǔ)vue3項(xiàng)目創(chuàng)建好后，需要在項(xiàng)目中安裝一些electron依賴的包。如果在安裝過(guò)程中卡住或失敗，建議切換淘寶鏡像，使用cnpm安裝。
# 安裝electron yarn add -D electron # 安裝electron-builder 用于打包可安裝exe程序和綠色版免安裝exe程序 yarn add -D electron-builder # 安裝electron-devtools-installer 用于開(kāi)發(fā)調(diào)試electron yarn add -D electron-devtools-installer
到這一步還需要安裝一個(gè)構(gòu)建electron程序的vite插件vite-plugin-electron
yarn add -D vite-plugin-electron
vite-plugin-electron：用于構(gòu)建electron應(yīng)用程序的vite插件。僅需少量配置，即可快速整合vite electron開(kāi)發(fā)環(huán)境。
該插件集成了Vite和Electron，方便在渲染進(jìn)程中使用Node API或者Electron API功能。
https://github.com/electron-vite/vite-plugin-electron
新建主進(jìn)程文件
在項(xiàng)目根目錄新建background.js文件，編寫(xiě)主進(jìn)程代碼。
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({
// 窗口圖標(biāo)
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)
// 開(kāi)啟調(diào)試臺(tái)
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()
})接下來(lái)在vite.config.js中引入vite-plugin-electron插件，配置主進(jìn)程入口，將electron和vite項(xiàng)目結(jié)合起來(lái)。
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({
// 主進(jìn)程入口文件
entry: 'background.js'
})
],
/*開(kāi)發(fā)服務(wù)器選項(xiàng)*/
server: {
// 端口
port: 3000,
}
})如果到這一步，運(yùn)行yarn dev會(huì)報(bào)錯(cuò)，需要在package.json文件中加入"main": "background.js"入口配置。
如果報(bào)錯(cuò)如下，需要去掉package.json文件中 "type": "module" 配置。
完整的package.json配置如下
{
"name": "electron-vite4-vue3",
"private": true,
"version": "0.0.0",
"description": "基于Electron24+Vite4.x+Vue3搭建項(xiàng)目框架",
"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啟動(dòng)項(xiàng)目，就能成功運(yùn)行了。
electron-builder打包配置
項(xiàng)目已經(jīng)運(yùn)行起來(lái)了，接下來(lái)就需要配置一些electron-builder打包腳本了。在項(xiàng)目根目錄新建electron-builder.json配置文件。
話不多說(shuō)，直接上代碼：
{
"productName": "ElectronVite4Vue3",
"appId": "cc.xiaoyan.electron-vite4-vue3",
"copyright": "Copyright ? 2023-present Andy",
"compression": "maximum",
"asar": true, // 打包格式壓縮
"directories": {
"output": "release/${version}" // 打包輸出目錄
},
// 配置extraResources后，electron-builder會(huì)在打包時(shí)將extraResources中指定的文件復(fù)制到打包后應(yīng)用程序的根目錄/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}"
}
}打包構(gòu)建
yarn electron:build
圖標(biāo)等資源文件放在resource目錄下
打包后顯示的任務(wù)欄及程序圖標(biāo)。
打包程序圖標(biāo)配置
窗口圖標(biāo)配置
主進(jìn)程中的__dirname變量指向當(dāng)前主進(jìn)程文件的目錄。
至此一個(gè)簡(jiǎn)易版的electron24+vite4跨端項(xiàng)目就搭建好了，至于主進(jìn)程/渲染進(jìn)程之間的通訊后續(xù)再分享哈~~
到此這篇關(guān)于基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實(shí)戰(zhàn)教程的文章就介紹到這了,更多相關(guān)Electron24+Vite4+Vue3搭建桌面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)組件的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue關(guān)于下載文件常用的幾種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-plugin-hiprint 詳細(xì)使用說(shuō)明,使用Vue.Draggable庫(kù)構(gòu)建可拖拽元素的示例,你可以根據(jù)具體需求和技術(shù)選型選擇適合的庫(kù)或方法來(lái)實(shí)現(xiàn)可拖拽元素的功能,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue父子組件的通信的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫(kù),它非常適合在前端開(kāi)發(fā)中模擬后端?API,尤其是在前后端分離的開(kāi)發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue3?js配置@符作為根路徑的相關(guān)資料,通過(guò)示例代碼介紹了如何通過(guò)配置jsconfig.json/tsconfig.json及構(gòu)建工具（Vite/Webpack）設(shè)置別名,使@符號(hào)指向src目錄,簡(jiǎn)化模塊導(dǎo)入路徑,提升代碼可讀性和維護(hù)性,需要的朋友可以參考下2025-05-05