前言

最近在編寫一個(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)楹唵伪憬?，而且不容易出錯(cuò)。

目前C站上面的打包教程，都是只教你指令，過程沒有講明白，所以就導(dǎo)致一些剛?cè)腴T的，沒有那么了解的朋友操作起來就一頭霧水，本文講解認(rèn)為較為詳細(xì)，將大家點(diǎn)點(diǎn)贊，支持一下！

第一步:下載模板e(cuò)lectron-quick-start

這個(gè)操作很簡單，你電腦上面有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)過漫長的等待，我們就可以看到項(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論