手把手教你使用electron將vue項(xiàng)目打包成exe
一、前言
node.js 版本要在 17+
建議使用 17.9.1 的 node 和 8.11.0 的 npm
node和npm的版本對(duì)應(yīng)關(guān)系如下，node 可以去這里下載
https://nodejs.org/zh-cn/download/releases/ 或者點(diǎn)擊這里下載
下載這個(gè) x86.msi 的，安裝時(shí)候改下安裝位置，然后一直下一步就行了
node 所對(duì)應(yīng)的 npm 用如下命令安裝
npm install -g npm@8.11.0
二、實(shí)現(xiàn)方法
1.跑通示例代碼 electron-quick-start
<1>clone示例代碼
git clone https://github.com/electron/electron-quick-start
項(xiàng)目結(jié)構(gòu)如下
<2>進(jìn)入項(xiàng)目根目錄，下載依賴
# 進(jìn)入項(xiàng)目目錄 cd electron-quick-start # 下載項(xiàng)目需要的依賴 npm install # 安裝 electron npm install electron --save-dev # 安裝 packager 包依賴 npm install electron-packager --save-dev
<3>測(cè)試運(yùn)行
# 運(yùn)行一下 Demo 看看是否可以成功 npm run start
運(yùn)行結(jié)果如下
ps:
npm 安裝有些包會(huì)被墻掉，可能會(huì)失敗，報(bào)錯(cuò)如下：
如果失敗了可以安裝 cnpm，安裝 cnpm 的方法如下：
# 安裝并指定淘寶源 npm install -g cnpm --registry=https://registry.npm.taobao.org
然后把上面的 npm 命令都替換成 cnpm 即可，替換后的代碼如下：
# 克隆示例代碼 git clone https://github.com/electron/electron-quick-start # 進(jìn)入項(xiàng)目目錄 cd electron-quick-start # 下載項(xiàng)目需要的依賴 cnpm install # 安裝 electron cnpm install electron --save-dev # 安裝 packager 包依賴 cnpm install electron-packager --save-dev # 運(yùn)行一下 Demo 看看是否可以成功 cnpm run start
2.打包自己的 vue 項(xiàng)目
到自己已經(jīng)寫好的vue項(xiàng)目中，輸入打包命令
npm run build
3.將vue項(xiàng)目整合到示例代碼中打包exe
<1>將打包好的 dist 文件夾復(fù)制到示例代碼 electron-quick-start 根目錄
目錄結(jié)構(gòu)如下：
<2>修改main.js文件
ps：
index.html 修改為 ./dist/index.html
<3>刪除 electron-quick-start 示例本身的 index.html 【這個(gè)沒(méi)用了，可以刪了】
<4>修改package.json文件
此處 scripts 字典替換成如下代碼
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
},
<5>打包exe
npm run packager
執(zhí)行文件在項(xiàng)目根目錄下的 App-win32-x64 文件夾中，叫 App.exe
雙擊執(zhí)行，效果如下
ps：
如果執(zhí)行打包命令時(shí)下載文件很慢，那就執(zhí)行這條命令，把 ELECTRON 下載的地址切換為淘寶的鏡像
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
總結(jié)
到此這篇關(guān)于使用electron將vue項(xiàng)目打包成exe的文章就介紹到這了,更多相關(guān)electron將vue項(xiàng)目打包exe內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue配置electron使用electron-builder進(jìn)行打包的操作方法
- vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
- 使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
- 如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
- 解決electron打包vue-element-admin項(xiàng)目頁(yè)面無(wú)法跳轉(zhuǎn)的問(wèn)題小結(jié)
- vue項(xiàng)目使用electron進(jìn)行打包操作的全過(guò)程
- 關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
- vue項(xiàng)目打包成桌面快捷方式(electron)的方法
- 用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問(wèn)題及解決
- vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置方法
相關(guān)文章
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題
這篇文章主要介紹了為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題,需要的朋友可以參考下2018-04-04
詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫(kù)
當(dāng)我們自己開(kāi)發(fā)了一個(gè) _UI Component_, 需要在多個(gè)項(xiàng)目中使用的時(shí)候呢? 我們首先想到的可能是直接復(fù)制一份過(guò)去對(duì)嗎?我們?yōu)槭裁床话l(fā)布一個(gè) UI 組件庫(kù)給自己用呢?下面小編和大家來(lái)一起學(xué)習(xí)下吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue + Element UI圖片上傳控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁(yè)面上回顯上傳的圖片,后端通過(guò)接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
Vue循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
本文主要介紹了Element-UI 10個(gè)技巧小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
如何在vue-cli中使用css-loader實(shí)現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實(shí)現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01