Vue項(xiàng)目使用electron打包桌面應(yīng)用方式
更新時(shí)間：2025年12月03日 14:12:42 作者：Z獸獸
本文詳細(xì)介紹了如何使用Vue3和Electron創(chuàng)建一個(gè)桌面應(yīng)用程序,并提供了一個(gè)完整的步驟指南,包括項(xiàng)目初始化、配置、安裝依賴、主進(jìn)程和渲染進(jìn)程的設(shè)置、打包配置以及解決常見問題的方法
1. Vue項(xiàng)目初始化與配置
創(chuàng)建一個(gè)Vue3項(xiàng)目，運(yùn)行項(xiàng)目
環(huán)境依賴：node.js（我的是v18.18.1版本）、npm
2. 修改 .npmrc 文件
.npmrc 文件路徑：C:\Users\xxx\
文件最后加：
electron_mirror=https://npmmirror.com/mirrors/electron/ electron-builder-binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
3. 項(xiàng)目中安裝electron包
npm install -d electron
或指定版本，我用的是28.0.0
npm install -d electron@28.0.0
如果用npm下載一直失敗，可嘗試用cnpm下載
//國內(nèi)鏡像源安裝 cnpm npm install -g cnpm --registry=https://registry.npmmirror.com //cnpm安裝electron cnpm install -d electron
4. electron的基本配置（主進(jìn)程和渲染進(jìn)程）
在項(xiàng)目根目錄新建一個(gè)electron文件夾，存放兩個(gè)文件：main.js(主進(jìn)程)、preload.js（渲染進(jìn)程）
main.js
const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;
function createWindow() {
Menu.setApplicationMenu(null);
// 創(chuàng)建瀏覽器窗口
const mainWindow = new BrowserWindow({
show: false,
minWidth: 1440,
minHeight: 900,
webPreferences: {
partition: String(+new Date()),
preload: path.join(__dirname, "preload.js"),
nodeIntegration: true,
contextIsolation: false
},
});
mainWindow.maximize();
mainWindow.show();
// 如果是開發(fā)環(huán)境就把當(dāng)前運(yùn)行的web端口做成客戶端預(yù)覽
// 如果是生產(chǎn)環(huán)境就把打包后的index做成客戶端預(yù)覽
mainWindow.loadURL(
NODE_ENV === "development"
? "http://localhost:8089"
: `file://${path.join(__dirname, "../dist/index.html")}`
);
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools(); // 打開開發(fā)者工具
}
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用,部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow();
app.on("activate", function () {
// 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});
preload.js
//使用JavaScript在Electron環(huán)境中動(dòng)態(tài)替換HTML元素文本，顯示Chrome、Node.js和Electron的版本信息：
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
該代碼會(huì)在DOM加載完成后自動(dòng)執(zhí)行版本信息替換，確保操作DOM時(shí)元素已存在。
process.versions是Electron提供的環(huán)境信息對象，包含各組件版本號(hào)。
5. 在package.json配置electron入口文件
- 刪除：
"type": "module"
- 添加：
"main": "electron/main.js"
6. 使用electron-builder打包
6.1 安裝electron-builder
npm install -d electron-builder
或指定版本，我用的是26.0.12
npm install -d electron-builder@26.0.12
同樣，如果npm下載失敗，改用 cnpm
cnpm install -d electron-builder
6.2 在 package.json 中修改配置
添加author、description、build字段，并在scripts中添加打包命令 electron:build
{
"description": "app",
"author": {
"name": "xxx",
"email": "xxx@qq.com.cn"
},
"scripts": {
"electron:build": "vite build && electron-builder",
},
"build": {
"appId": "xxx.app",
"productName": "應(yīng)用名稱",
"copyright": "Copyright ? 2023",
"directories": {
"output": "dist_electron" //打包后的文件夾
},
"win": {
"icon": "/build/icons/icon.ico" //應(yīng)用圖標(biāo)，有需要就加，根目錄下build文件夾
},
"mac": {
"icon": "/build/icons/icon.icns"
},
"linux": {
"icon": "/build/icons/icon.png"
},
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"files": [
"./dist",
"./electron",
"!**/node_modules/**"
],
"asar": false,
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true
}
}
}
注意：icon需要256*256的格式圖片。且不同操作系統(tǒng)的icon類型不一樣
6.3 若系統(tǒng)白屏
在 vite.config.ts 中添加 base 字段
base: "./"
7. 完成，執(zhí)行打包命令
npm run electron:build
打包后的文件，win-unpacked 中有免安裝的可以直接打開看
8. 在打包過程中，還可能會(huì)失敗，這時(shí)候就需要下載幾個(gè)安裝包了
我當(dāng)時(shí)下載的網(wǎng)址找不到了，附上我的壓縮包，在文章頂部綁定的資源里
8.1 nsis
8.2 winCodeSign
這幾個(gè)包的作用就是：把我們的應(yīng)用打包成一個(gè)可以安裝、卸載、自動(dòng)創(chuàng)建桌面圖標(biāo)的.exe安裝包
總結(jié)
至此，所有步驟完成，我們就可以自己創(chuàng)建桌面應(yīng)用程序了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vue中typescript裝飾器的使用方法超實(shí)用教程
這篇文章主要介紹了vue中使用typescript裝飾器的使用方法超實(shí)用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.filter函數(shù)用于注冊一個(gè)全局的過濾器,該過濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結(jié),需要的朋友可以參考下2024-08-08
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue視頻播放暫停代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue中的無限加載vue-infinite-loading的方法
本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04