vue2結合electron開發跨平臺應用(桌面端應用)

1.確定nodejs和electron的版本號??

確定nodejs和electron的版本號及其重要，因為electron的開發版本需要指定的nodejs版本支持。?

?本文安裝測試使用的是:

? ?1.node18.19.0

? ?2.npm10.2.3?

? ?3.vue-cli5.0.8

? ?4.electron29.0.0

??

2.創建vue2項目?

vue create elctron29.0.0_node18.19.0_vuecli5.0.8_vue2

?

3.安裝electron?

npm install electron@29.0.0 --save-dev

?

?4.安裝electron-builder

vue add electron-builder

?在項目的src目錄下增加了文件，并在注入

5.啟動electron項目?

npm run electron:serve

?

首次啟動會加載相當緩慢，會有如下提示信息：?

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times

?解決首次加載緩慢的辦法：

? ?在項目中找到background.js文件，注釋background.js文件中的這段代碼：import? ? ? ?installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

?再次啟動測試

很快就啟動成功了！?

6.打包electron項目

 npm run electron:build

使用?electron-builder 構建 vue 項目，運行 npm run electron:build ，構建過程報錯。這個錯誤可能是由于使用的 Node.js 版本過高，不支持當前的 OpenSSL 版本，導致構建失敗。解決這個問題的方法是在構建命令前設置 NODE_OPTIONS 環境變量，強制使用 OpenSSL 的舊版提供程序。?

報錯提示


C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2>npm run electron:build

> elctron29.0.0_node18.19.0_vuecli5.0.8_vue2@0.1.0 electron:build
> vue-cli-service electron:build

?INFO ?Bundling render process:
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


- ?Building for production...

?DONE ?Compiled successfully in 4261ms ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?13:26:43
? File ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Size ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Gzipped

? dist_electron\bundled\js\chunk-vendors.91055014.js ? ?127.60 KiB ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 43.44 KiB
? dist_electron\bundled\js\app.60bf7bcd.js ? ? ? ? ? ? ?15.53 KiB ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?9.52 KiB
? dist_electron\bundled\js\about.85649f72.js ? ? ? ? ? ?0.50 KiB ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0.32 KiB
? dist_electron\bundled\css\app.bc18c568.css ? ? ? ? ? ?0.42 KiB ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0.26 KiB

? Images and other types of assets omitted.
? Build at: 2024-03-02T05:26:43.958Z - Hash: 1ffa631b94053caa - Time: 4261ms

?DONE ?Build complete. The dist_electron\bundled directory is ready to be deployed.
?INFO ?Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

/ ?Bundling main process...

?ERROR ?Failed to compile with 1 errors ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 13:26:45

?error

background.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
? ? at new Hash (node:internal/crypto/hash:69:19)
? ? at Object.createHash (node:crypto:133:10)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:217:37
? ? at Array.forEach (<anonymous>)
? ? at TerserPlugin.optimizeFn (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:160:259)
? ? at _next0 (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:1)
? ? at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
? ? at processTicksAndRejections (node:internal/process/task_queues:95:5)

C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\index.js:198
? ? ? ? ? ? ? throw new Error('Build failed with errors.')
? ? ? ? ? ? ? ? ? ? ^

Error: Build failed with errors.
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\index.js:198:21
? ? at finalCallback (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:257:39)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:273:13
? ? at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
? ? at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
? ? at onCompiled (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:271:21)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:681:15
? ? at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
? ? at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compiler.js:678:31
? ? at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
? ? at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compilation.js:1423:35
? ? at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
? ? at AsyncSeriesHook.lazyCompileHook (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\Hook.js:154:20)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\Compilation.js:1414:32
? ? at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
? ? at C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:321:9
? ? at TaskRunner.run (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
? ? at TerserPlugin.optimizeFn (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:227:18)
? ? at _next0 (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:8:1)
? ? at eval (eval at create (C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2\node_modules\vue-cli-plugin-electron-builder\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
? ? at processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.19.0

C:\Users\63002\Desktop\elctron29.0.0_node18.19.0_vuecli5.0.8_vue2>

解決方案

打開package.json，找到

  "scripts": {"electron:build": "vue-cli-service electron:build",},

改為

  "scripts": {"electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",},

?通過設置 NODE_OPTIONS 環境變量為 --openssl-legacy-provider，可以強制使用舊版的 OpenSSL 提供程序，從而解決構建過程中的報錯問題。

再次打包測試

?

可以正常打包，不報錯了。?

注意：

1.打包windows桌面端軟件要在windows系統的真機或者虛擬機上進行打包。同樣打包Mac系統的桌面端軟件要在Mac系統的真機或者虛擬機上進行打包。其他操作系統同理。

2.如果要打包發布到對應應用商店需要代碼簽名。https://www.electronjs.org/zh/docs/latest/tutorial/%E6%89%93%E5%8C%85%E6%95%99%E7%A8%8B

7.安裝打包后的軟件

源碼：GitHub - 1t1824d/elctron29.0.0_node18.19.0_vuecli5.0.8_vue2?

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/716469.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/716469.shtml
英文地址，請注明出處：http://en.pswp.cn/news/716469.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

zotero | 多平臺同步 ｜ 堅果云

zotero | 多平臺同步 ｜ 堅果云

zotero注冊登陸 打開zotero軟件&#xff0c;mac電腦打開首選項&#xff0c;如下圖所示&#xff1a; 然后點擊同步選項&#xff0c;如下圖所示&#xff0c;如果已經有賬號&#xff0c;請登陸賬號&#xff0c;無則注冊賬號之后再登陸&#xff1b; 注冊堅果云賬號 注冊完堅果…
閱讀更多...
求最短路徑之BF算法

求最短路徑之BF算法

介紹 全稱Bellman-Ford算法&#xff0c;目的是求解有負權邊的最短路徑問題。 考慮環&#xff0c;根據環中邊的邊權之和的正負&#xff0c;將環分為零環、正環、負環。其中零環、正環不會影響最短路徑的求解&#xff0c;而負環會影響最短路徑的求解。 可用BF算法返回一個bool值…
閱讀更多...
暗黑大氣MT蘋果CMS MT主題源碼-PC版適用于蘋果CMS V10

暗黑大氣MT蘋果CMS MT主題源碼-PC版適用于蘋果CMS V10

蘋果CMS MT主題是一款多功能的主題&#xff0c;適用于蘋果CMS V10的暗黑大氣風格。 地 址 &#xff1a; runruncode.com/houtai/19704.html 初次使用說明&#xff1a; 在后臺設置中&#xff0c;選擇MT主題&#xff0c;并在模板目錄中填寫HTML。 后臺地址為&#xff1a;MT主題…
閱讀更多...
*JAVAWEB--maven*

*JAVAWEB--maven*

一:介紹: maven是一種專門管理以及構建JAVA項目的一個工具,maven屹立這么久也是因為其有三個非常好用的功能: 1.提供標準化的項目結構 比方說平時我們編寫JAVA項目的時候,如果想把原本在eclipse當中編寫的項目導入到IDEA當中進行使用,就會導致報錯,因為這兩個的項目結構并不一樣…
閱讀更多...
圖神經網絡實戰——基于DeepWalk創建節點表示

圖神經網絡實戰——基于DeepWalk創建節點表示

圖神經網絡實戰——基于DeepWalk創建節點表示 0. 前言1. Word2Vec1.1 CBOW 與 skip-gram1.2 構建 skip-gram 模型1.3 skip-gram 模型1.4 實現 Word2Vec 模型 2. DeepWalk 和隨機行走3. 實現 DeepWalk小結系列鏈接 0. 前言 DeepWalk 是機器學習 (machine learning, ML) 技術在圖…
閱讀更多...
[Angular 基礎] - routing 路由(上)

[Angular 基礎] - routing 路由(上)

[Angular 基礎] - routing 路由(上) 之前部分 Angular 筆記&#xff1a; [Angular 基礎] - 生命周期函數 [Angular 基礎] - 自定義指令&#xff0c;深入學習 directive [Angular 基礎] - service 服務 終于到 routing 了……這部分的內容比我想象的要復雜很多&#xff0c;果…
閱讀更多...
LC打怪錄 選擇排序 215.Kth Largest Element in an Array

LC打怪錄 選擇排序 215.Kth Largest Element in an Array

題目鏈接&#xff1a;力扣 選擇排序知識 設第一個元素為比較元素&#xff0c;依次和后面的元素比較&#xff0c;比較完所有元素并找到最小元素&#xff0c;記錄最小元素下標&#xff0c;和第0個下表元素進行交換。在未排序區域中&#xff0c;重復上述操作&#xff0c;以此類推…
閱讀更多...
力扣每日一題 用隊列實現棧 模擬

力扣每日一題 用隊列實現棧 模擬

Problem: 225. 用隊列實現棧 文章目錄 思路復雜度Code 思路 &#x1f468;?&#x1f3eb; 力扣官解 輔助隊列存棧頂元素主隊列存逆序序列 復雜度 時間復雜度: 添加時間復雜度, 示例&#xff1a; O ( n ) O(n) O(n) 空間復雜度: 添加空間復雜度, 示例&#xff1a; O ( …
閱讀更多...
js監聽網頁iframe里面元素變化其實就是監聽iframe變化

js監聽網頁iframe里面元素變化其實就是監聽iframe變化

想要監聽網頁里面iframe標簽內容變化&#xff0c;需要通過監聽網頁dom元素變化&#xff0c;然后通過查詢得到iframe標簽&#xff0c;再通過iframe.contentWindow.document得到ifram內的document&#xff0c;然后再使用選擇器得到body元素&#xff0c;有了body元素&#xff0c;就…
閱讀更多...
2024年華為OD機試真題-貪吃的猴子-Python-OD統一考試（C卷）

2024年華為OD機試真題-貪吃的猴子-Python-OD統一考試（C卷）

題目描述： 一只貪吃的猴子，來到一個果園，發現許多串香蕉排成一行，每串香蕉上有若干根香蕉。每串香蕉的根數由數組numbers給出。猴子獲取香蕉，每次都只能從行的開頭或者末尾獲取，并且只能獲取N次，求猴子最多能獲取多少根香蕉。 輸入描述： 第一行為數組numbers的長度 第二…
閱讀更多...
Java和JavaScript之間的主要區別與聯系

Java和JavaScript之間的主要區別與聯系

目錄 概況 主要區別 聯系 總結 概況 Java和JavaScript&#xff0c;盡管名字相似&#xff0c;但它們在編程世界中卻扮演著截然不同的角色。Java&#xff0c;一種強類型、面向對象的編程語言&#xff0c;廣泛應用于企業級應用和安卓應用開發。它的設計理念是一次編寫&#x…
閱讀更多...
使用協程庫httpx并發請求

使用協程庫httpx并發請求

httpx和aiohttp都是比較常用的異步請求庫&#xff0c;當然requests多線程或requestsgevent也是不錯的選擇。 一個使用httpx進行并發請求的腳本如下&#xff1a; import functools import sys import timeimport anyio import httpxasync def fetch(client, results, index) -…
閱讀更多...
詳解 JavaScript 中的數組

詳解 JavaScript 中的數組

詳解 JavaScript 中的數組 創建數組 注&#xff1a;在JS中的數組不要求元素的類型&#xff0c;元素類型可以一樣&#xff0c;也可以不一樣 1.使用 new 關鍵字創建 let array new Array()2.使用字面量方式創建(常用) let array1 [1,2,3,"4"]獲取數組元素 使用下…
閱讀更多...
西安-騰訊云-Python面試經驗--一面涼經

西安-騰訊云-Python面試經驗--一面涼經

自我介紹手撕鏈表排序操作系統 a. 線程和進程區別 b. 線程安全 c. 如何保證線程安全 d. 線程崩潰&#xff0c;會不會影響所在的進程 e. 什么是守護進程&#xff0c;僵尸進程&#xff0c;孤兒進程 f. 如何產生一個守護進程 g. 如何避免僵尸進程或者孤兒進程redis a. 持久化方式有…
閱讀更多...
【STK】手把手教你利用STK進行仿真-STK軟件簡介05 STK部分第三方分析模塊介紹

【STK】手把手教你利用STK進行仿真-STK軟件簡介05 STK部分第三方分析模塊介紹

1.導彈建模工具MMT 導彈建模工具MMT(Missile Modeling Tools)是STK在導彈分析領域的擴展分析應用，它是由四個獨立的應用程序組成的相互支持與關聯的系統，由第三方研究機構開發，能夠與STK基本航天分析環境進行聯合仿真分析。MMT主要用于導彈總體設計（包括彈道導彈、巡航導彈…
閱讀更多...
python進階：可迭代對象和迭代器

python進階：可迭代對象和迭代器

一、Iterable&#xff08;可迭代對象&#xff09; 1、可迭代對象&#xff1a;能夠進行迭代操作的對象。 可以理解為&#xff1a;能夠使用for循環遍歷的都是可迭代對象&#xff1b;**所有的可迭代對象&#xff0c;偶可以用內置函數iter轉換為迭代器** 2、可迭代對象包括&…
閱讀更多...
藍橋杯題練習：平地起高樓

藍橋杯題練習：平地起高樓

題目要求 function convertToTree(regions, rootId "0") {// TODO: 在這里寫入具體的實現邏輯// 將平鋪的結構轉化為樹狀結構&#xff0c;并將 rootId 下的所有子節點數組返回// 如果不存在 rootId 下的子節點&#xff0c;則返回一個空數組}module.exports convert…
閱讀更多...
網絡防御保護——課堂筆記

網絡防御保護——課堂筆記

一.內容安全 攻擊可能只是一個點&#xff0c;防御需要全方面進行 IAE引擎 DFI和DPI技術 --- 深度檢測技術 DPI ---深度包檢測技術 ---主要針對完整的數據包&#xff08;數據包分片&#xff0c;分段需要重組&#xff09;&#xff0c;之后對數據包的內容進行識別。&#xff08;應…
閱讀更多...
ifcplusplus 示例 函數中英文 對照分析以及流程圖

ifcplusplus 示例 函數中英文 對照分析以及流程圖

有需求&#xff0c;需要分析 ifc c渲染&#xff0c;分析完&#xff0c;有 230個函數&#xff0c;才能完成一個加載&#xff0c;3d加載真的是大工程&#xff01; 示例代碼流程圖 函數中英文對照表&#xff0c;方便 日后開發&#xff0c;整理思路順暢&#xff01;&#xff01;&am…
閱讀更多...
C++三級專項 digit函數

C++三級專項 digit函數

在程序中定義一函數dight(n,k),他能分離出整數n從右邊數第k個數字。 輸入 正整數n和k。 輸出 一個數字。 輸入樣例 31859 3 輸出樣例 8解析&#xff1a;遞歸&#xff0c;詳情看code. 不準直接抄&#xff01;&#xff01;&#xff01; #include <iostream> usin…
閱讀更多...
最新文章

Copyright @ 2022~2023