將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟
前言
最近在編寫一個(gè)軟件系統(tǒng)，讓將打包好的vue工程，變成電腦端.exe可執(zhí)行程序呈現(xiàn)，之前沒有涉及到過這方面的開發(fā)，所以到了網(wǎng)上看了相關(guān)的操作流程，現(xiàn)在最主流的打包方式有兩種，一種是electron更換自己項(xiàng)目的demo，另一個(gè)就是再electron中修改，主要修改的是自己項(xiàng)目的路徑。當(dāng)然，這兩種方法全都是在electron這個(gè)工具上面進(jìn)行修改的，我們使用的是第一種方案，為什么呢，因?yàn)楹?jiǎn)單便捷，而且不容易出錯(cuò)。
目前C站上面的打包教程，都是只教你指令，過程沒有講明白，所以就導(dǎo)致一些剛?cè)腴T的，沒有那么了解的朋友操作起來就一頭霧水，本文講解認(rèn)為較為詳細(xì)，將大家點(diǎn)點(diǎn)贊，支持一下！
第一步:下載模板e(cuò)lectron-quick-start
這個(gè)操作很簡(jiǎn)單，你電腦上面有Git的話可以使用命令行直接輸入下面的代碼，不然還可以到electron官方網(wǎng)站上面或者GitHub上面自行下載一個(gè)模板，這邊就只教第一個(gè)。打開Git CMD
輸入下面的Git地址位置：
git clone https://github.com/electron/electron-quick-start
這樣我的E盤里面就會(huì)有一個(gè)下載好的模板了，我們可以看一下，
第二步：進(jìn)入到下載好的模板文件當(dāng)中（electron-quick-start）
我們直接使用VS code將這個(gè)文件打開，
直接使用命令npm start將這個(gè)官方的demo跑起來，我們就可以看到官方demo里面的應(yīng)用程序界面了。
呈現(xiàn)出來的應(yīng)該是這樣的界面，沒有操作成功的朋友，主要看到是不是進(jìn)入到了文件夾，沒有進(jìn)入到的使用cd 到這個(gè)文件夾；如果還是發(fā)現(xiàn)錯(cuò)誤，那可能是你沒有安裝依賴，npm install,剩下的具體的原因根據(jù)具體的報(bào)錯(cuò)具體提問，謝謝！
我們接下來看一下官方實(shí)例文件夾里面（electron-quick-start）當(dāng)中的入口文件mian.js,下圖是createWindows（創(chuàng)建串口的）函數(shù)部分；
第三步：打包自己的項(xiàng)目（npm run build）
注意是自己的項(xiàng)目，別稀里糊涂的將官方的demo打包了自己都沒有發(fā)覺！
回到文件夾我們就可以看到這樣：
第四步：刪掉官方demo下的index.html文件
第五步：在官方demo項(xiàng)目當(dāng)中找到main.js，修改打包文件路徑為我們的index.html
第六步：將自己項(xiàng)目打包后的dist文件夾復(fù)制到官方demo根目錄
第七步：在官方demo項(xiàng)目中檢查一下package.json,正常情況下，運(yùn)行下面的指令就可以進(jìn)入效果預(yù)覽
第八步：在官方demo項(xiàng)目中，下載打包需要的依賴electr-packager
（也可以vs code命令行中斷直接輸入指令下載，這邊只是習(xí)慣CMD）
第九步：在官方demo當(dāng)中，進(jìn)入package.json,在script中添加packager指令
第十步：運(yùn)行命令打包，然后項(xiàng)目當(dāng)中就會(huì)出現(xiàn)一個(gè)App-win32-x64的文件夾
npm run packager
經(jīng)過漫長(zhǎng)的等待，我們就可以看到項(xiàng)目當(dāng)中出現(xiàn)一個(gè)App-win32-x64的文件夾，這個(gè)文件夾就是打包好的桌面應(yīng)用，文件夾當(dāng)中會(huì)有一個(gè)App.exe文件，這個(gè)就是我們的啟動(dòng)文件。
總結(jié)
到此這篇關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的文章就介紹到這了,更多相關(guān)vue打包成電腦端應(yīng)用.exe內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue input 輸入校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue input 校驗(yàn)字母數(shù)字組合且長(zhǎng)度小于30的實(shí)現(xiàn)代碼，文章給大家補(bǔ)充介紹了在Vue.Js下使用el-input框只能輸入數(shù)字并限制位數(shù)并且限制中文輸入以及粘貼功能，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解使用VUE搭建后臺(tái)管理系統(tǒng)(vue-cli更新至3.0)
這篇文章主要介紹了詳解使用VUE搭建后臺(tái)管理系統(tǒng)(vue-cli更新至3.0),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
elementUI Tree 樹形控件單選實(shí)現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了Vue?內(nèi)置指令梳理總結(jié)，文章首先從v-text指令展開內(nèi)容介紹，具有一定的知識(shí)性參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過點(diǎn)擊空白頁(yè)面來讓彈窗隱藏,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
在Vue開發(fā)過程中解決和預(yù)防內(nèi)存泄漏問題的方法詳解
Vue作為一款流行的前端框架,已經(jīng)在許多項(xiàng)目中得到廣泛應(yīng)用,然而,隨著我們?cè)赩ue中構(gòu)建更大規(guī)模的應(yīng)用程序,我們可能會(huì)遇到一個(gè)嚴(yán)重的問題,那就是內(nèi)存泄漏,因此,我們需要認(rèn)識(shí)到在Vue開發(fā)過程中,內(nèi)存泄漏問題的重要性,本文將給大家介紹如何解決和預(yù)防內(nèi)存泄漏問題2023-10-10
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
vueRouter--matcher之動(dòng)態(tài)增減路由方式
這篇文章主要介紹了vueRouter--matcher之動(dòng)態(tài)增減路由方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04