vue3集成electron的過程
安裝說明
vue集成electron時(shí),會(huì)用到兩個(gè)依賴。分別是electron和electron-builder,前者是開發(fā)環(huán)境下使用,后者是打包部署時(shí)使用。安裝時(shí),可在線安裝也可離線安裝。所謂離線安裝就是自己下載好用到的包,然后放到指定目錄下。其實(shí)在線安裝時(shí)候,也是這個(gè)過程,只是它自己去下載包。
本次集成過程,沒有開VPN,訪問github,基本不通。所以最終安裝時(shí)候,采用了在線+離線方式安裝,因?yàn)橛行┌枰獜膅ithub上下載。整個(gè)安裝過程如下。
創(chuàng)建一個(gè)vue3項(xiàng)目
創(chuàng)建過程參考vue3官網(wǎng)。執(zhí)行npm run dev運(yùn)行項(xiàng)目,瀏覽器頁(yè)面展示如下:
安裝electron作為開發(fā)依賴
用上面創(chuàng)建的vue3項(xiàng)目做測(cè)試,開始集成electron。執(zhí)行如下命令開始安裝。
npm install electron --save-dev
通常這一步安裝會(huì)報(bào)如下錯(cuò)誤。
這是因?yàn)殓R像地址問題,有些沒有配置,有些無(wú)法訪問。所以我們直接手動(dòng)修改鏡像地址,改為國(guó)內(nèi)鏡像源。
說明一下,npm的配置文件是.npmrc,相當(dāng)于Maven中的配置文件settings.xml。都是用來管理依賴包的鏡像源。文件路徑一般在用戶目錄下,如C:\Users\ZHANGJUN\.npmrc。
我們也可以用命令查找下
npm config get userconfig
現(xiàn)在我們執(zhí)行如下命令,修改配置文件,將electron鏡像源添加進(jìn)去。我這里用的華為鏡像源,用其他的都行。只要能正常訪問即可。
npm config set ELECTRON_MIRROR https://repo.huaweicloud.com/electron/
如果因?yàn)闄?quán)限問題或其他問題,導(dǎo)致上面命令報(bào)錯(cuò),添加失敗。我們也可以直接打開配置文件,手動(dòng)修改。
可以直接到文件目錄下,打開文件,如C:\Users\ZHANGJUN\.npmrc。也可以通過命令打開。執(zhí)行如下命令后,會(huì)彈出npmrc頁(yè)面,然后將上面地址添加進(jìn)去。
npm config edit
修改完后,再次執(zhí)行npm install electron --save-dev。又出現(xiàn)如下錯(cuò)誤,后面排查是版本問題。所以安裝命令帶上版本號(hào)。
npm install electron@29.1.1 --save-dev
可以看到,在帶上版本后,安裝成功。我們也可以在package.json和node_modules中看到添加的electron內(nèi)容。
添加electron配置文件
在項(xiàng)目跟目錄下創(chuàng)建electron目錄,然后新增main.js、preload.js等
main.js代碼
const { app, BrowserWindow, Menu, session, globalShortcut } = require('electron') const { join } = require('path') const path = require('path') //const preloadPath = app.isPackaged ? "../../preload.js" : "../preload.js"; const preloadPath = './preload.js' const renderProcessApi = path.resolve(__dirname, preloadPath) // process.env.DIST = join(process.env.DIST_ELECTRON, "../dist"); // const indexHtml = join(process.env.DIST, "index.html"); process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true const createWindow = async () => { Menu.setApplicationMenu(null) const win = new BrowserWindow({ // width: 1024, // height: 768, width: 1040, height: 807, fullscreen: true, //全屏 title: 'electron測(cè)試項(xiàng)目', // frame: false, //直接去除導(dǎo)航頭部 show: true, webPreferences: { webSecurity: false, nodeIntegration: true, enableRemoteModule: true, contextIsolation: false, preload: renderProcessApi } }) // win.loadFile(join(__dirname, "../dist/index.html")); const env = app.isPackaged ? 'production' : 'development' console.log('env ' + env) console.log('process.env.NODE_ENV ' + process.env.VITE_APP_ENV) const indexHtml = { development: 'http://localhost:5173', // 開發(fā)環(huán)境 // development: join(__dirname, "../dist/index.html"), // 開發(fā)環(huán)境 production: join(__dirname, '../dist/index.html') // 生產(chǎn)環(huán)境 } if (app.isPackaged) { win.loadFile(indexHtml[env]) } else { win.loadURL(indexHtml[env]) } globalShortcut.register('Ctrl + Shift + i', function () { win.webContents.openDevTools() }) globalShortcut.register('f11', function () { if (win.isFullScreen()) { win.setFullScreen(false) } else { win.setFullScreen(true) } }) } app.whenReady().then(async () => { // if (!app.isPackaged) { // await session.defaultSession.loadExtension( // join(__dirname, "../plugins/vuetools6.6.1_0") // ); // } createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
preload.js代碼
// 所有的 Node.js API接口 都可以在 preload 進(jìn)程中被調(diào)用. // 它擁有與Chrome擴(kuò)展一樣的沙盒。 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]) } })
這里簡(jiǎn)單解釋下main.js和preload.js。
main.js
- 任何 Electron 應(yīng)用程序的入口都是 main 文件。 這個(gè)文件控制了主進(jìn)程,它運(yùn)行在一個(gè)完整的Node.js環(huán)境中,負(fù)責(zé)控制應(yīng)用的生命周期。
- 在此腳本中,使用 Electron 的 app 和 BrowserWindow 模塊來創(chuàng)建一個(gè)瀏覽器窗口,在一個(gè)單獨(dú)的進(jìn)程(渲染器)中顯示網(wǎng)頁(yè)內(nèi)容。
preload.js
- 預(yù)加載腳本,在electron網(wǎng)頁(yè)頁(yè)面加載前執(zhí)行,可以做一些初始化工作。
- 暴露 Node.js 功能給渲染進(jìn)程。通過在 preload.js 中使用 exposeInMainWorld 方法,開發(fā)者可以將 Node.js 的模塊或 Electron 的功能安全地暴露給渲染進(jìn)程的頁(yè)面。這樣,渲染進(jìn)程就可以像使用前端庫(kù)一樣使用這些功能,而不需要直接操作 Electron 的遠(yuǎn)程對(duì)象。
- 提供安全的上下文環(huán)境:preload.js 運(yùn)行在一個(gè)特殊的上下文中,它與頁(yè)面的普通 JavaScript 環(huán)境是隔離的。這樣可以防止頁(yè)面腳本直接訪問 Node.js 的某些敏感功能,增強(qiáng)了應(yīng)用的安全性。
- 模塊化管理:preload.js 可以作為模塊化管理的入口,將一些通用的邏輯或工具函數(shù)預(yù)先加載到渲染進(jìn)程中,以便在不同的頁(yè)面或組件中復(fù)用。
main.js主要用來創(chuàng)建一個(gè)window窗口,調(diào)用api設(shè)置窗口大小、樣式等。并設(shè)置開發(fā)環(huán)境和生產(chǎn)環(huán)境下訪問地址。
而preload.js主要用來進(jìn)行一些初始化工作,比如讀取配置文件,全局初始化等。
添加完上面兩個(gè)js后,還有一個(gè)配置要修改。那就是package.json。將type改為commonjs,main改為electron/main.js。然后在scripts中新增一條語(yǔ)句:"start": "vite | electron ."
到此配置工作結(jié)束,運(yùn)行項(xiàng)目,看能否正常顯示。執(zhí)行
npm run start
頁(yè)面以window窗口形式運(yùn)行,里面頁(yè)面展示和瀏覽器展示效果一樣。至此,vue3開發(fā)環(huán)境集成electron就基本結(jié)束了。
electron打包構(gòu)建
項(xiàng)目最終還是要打包部署,這里使用electron-builder。執(zhí)行命令安裝
npm install electron-builder -D 或 npm install electron-builder@24.13.3 -D
修改package.json,添加打包信息。
在scripts標(biāo)簽中新增命令:"electron:build": "vite build && electron-builder"。后續(xù)執(zhí)行npm run electron:build 即可完成打包。
新增build字段,添加如下內(nèi)容:
"build": { "productName": "electronDemo", "appId": "electronDemo", "asar": true, "directories": { "output": "dist-electron/${version}" }, "files": [ "dist", "electron" ], "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "installerIcon": "./electron/icon.ico", "uninstallerIcon": "./electron/icon.ico", "installerHeaderIcon": "./electron/icon.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "electron系統(tǒng)" }, "mac": { "category": "your.app.category.type" }, "win": { "icon": "./electron/icon.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": {} }
其中:
- productName:項(xiàng)目名,也是生成的安裝文件名
- appId:軟件的ID,用來上架各平臺(tái)
- nsis:軟件安裝包的交互行為,配置稍多
- win.icon: 應(yīng)用圖標(biāo)
- win.target.arch:建議設(shè)置ia32,適配windows大部分版本
- "asar": false, 打包時(shí)不進(jìn)行加密
修改完后,執(zhí)行命令。開始打包
npm run electron:build
構(gòu)建過程中,會(huì)從github上下載三個(gè)包,分別是winCodeSign-2.6.0.7z、nsis-3.0.4.1.7z、nsis-resources-3.4.1.7z。前文已經(jīng)說過,github基本訪問不通,所以我這里下載肯定失敗。報(bào)錯(cuò)如下:
前文也說過,npm在線下載過程也是從遠(yuǎn)程服務(wù)器上把安裝包下載到本地。所以這里我就手動(dòng)把這三個(gè)包都下載下來。然后放到對(duì)應(yīng)的electron緩存目錄下。至于electron緩存目錄及執(zhí)行過程詳細(xì)情況,大家仔細(xì)百度(基本就是首次將包下載到緩存中,以后直接從緩存中獲?。?。
electron緩存目錄路徑為:C:\Users\zjun\AppData\Local
可以看到有兩個(gè),electron開發(fā)環(huán)境時(shí)用到,也就是在我們執(zhí)行npm install electron@29.1.1 --save-dev時(shí),它會(huì)把包下載到electron/Cache下。同理,如果這個(gè)命令也下載不了,我們也可以先把包下載下來,然后放到這個(gè)緩存目錄下。包名就是electron-v29.1.1-win32-ia32.zip。
這是electron/Cache下內(nèi)容
這是electron-builder/Cache下內(nèi)容。只需將三個(gè)安裝包放到對(duì)應(yīng)目錄下,然后解壓即可。
三個(gè)包都添加完后,再次執(zhí)行打包命令:npm run electron:build。不出意外下,打包成功,如下圖:
target顯示的就是打包后的名稱及路徑。到這個(gè)目錄下,雙擊exe安裝。
安裝成功后,桌面會(huì)有exe的快捷方式。運(yùn)行看是否正常。
至此。electron的集成和打包基本結(jié)束。
至于某些博主提到的熱更新:npm install nodemon -D和命令行合并工具:npm install npm-run-all -D。我發(fā)現(xiàn)項(xiàng)目已經(jīng)有了這些功能,所以就不再安裝。需要測(cè)試的話,可自行安裝測(cè)試。
參考文檔:
https://blog.csdn.net/weixin_45687201/article/details/136424017
使用electron創(chuàng)建桌面應(yīng)用及常見打包錯(cuò)誤解決_wincodesign-2.6.0.7z-CSDN博客
vite+vue3+electron項(xiàng)目搭建教程_electron vue3 vite配置-CSDN博客
https://blog.csdn.net/qq_39124701/article/details/128299948
全網(wǎng)詳解 .npmrc 配置文件:比如.npmrc的優(yōu)先級(jí)、命令行,如何配置.npmrc以及npm常用命令等-CSDN博客
到此這篇關(guān)于vue3集成electron的文章就介紹到這了,更多相關(guān)vue3集成electron內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
- 如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行
- 基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
- 基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實(shí)戰(zhàn)教程
- vue3+ts+vite+electron搭建桌面應(yīng)用的過程
- Vite+Electron快速構(gòu)建VUE3桌面應(yīng)用的實(shí)現(xiàn)
- Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
相關(guān)文章
vue3組件庫(kù)Shake抖動(dòng)組件搭建過程詳解
這篇文章主要為大家介紹了vue3組件庫(kù)Shake抖動(dòng)組件搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10使用Pinia Persistedstate插件實(shí)現(xiàn)狀態(tài)持久化的操作方法
Pinia 作為 Vue 的新一代狀態(tài)管理工具,以其輕量化和易用性受到開發(fā)者的喜愛,然而,Pinia 默認(rèn)使用內(nèi)存存儲(chǔ)狀態(tài),為了解決這個(gè)問題,我們可以借助 Pinia Persistedstate 插件來實(shí)現(xiàn)狀態(tài)的持久化存儲(chǔ),本文將詳細(xì)介紹該插件的使用方法,需要的朋友可以參考下2024-11-11vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01解決echarts圖表使用v-show控制圖表顯示不全的問題
這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07解決vue 更改計(jì)算屬性后select選中值不更改的問題
下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03