最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

提前準備一個vue項目，也可以使用初始的vue項目

創(chuàng)新互聯(lián)建站致力于互聯(lián)網(wǎng)品牌建設與網(wǎng)絡營銷，包括成都網(wǎng)站建設、成都網(wǎng)站設計、SEO優(yōu)化、網(wǎng)絡推廣、整站優(yōu)化營銷策劃推廣、電子商務、移動互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)建站為不同類型的客戶提供良好的互聯(lián)網(wǎng)應用定制及解決方案，創(chuàng)新互聯(lián)建站核心團隊10年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設服務，在網(wǎng)站建設行業(yè)內樹立了良好口碑。

vue init webpack

安裝到后邊有的會出現(xiàn)報錯，可以忽略，啟動npm run dev 啟動成功就可以

在vue項目下執(zhí)行下載以下依賴，會用到

cnpm install electron --save-dev
cnpm install electron-packager --save-dev //這個是打成exe文件的插件，之后要用，提前下載好

獲取Electron的資源

git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //這里我用的是cnpm,npm太慢了

將Electron獲取到資源的main.js復制到vue里面的bulid里面并修改為electron.js

然后修改

將assetsPublicPath: '/' 改為./，都是為了獲取準確的路徑

然后再修改electron.js

改為 這個pathname: path.join(__dirname, '../dist/index.html')

不懂的可以去搜vue 的 dist

這些改好了之后配置package.json

用來啟動 npm run abc

啟動成功為

啟動成功可以執(zhí)行下一步

在配置打包的package.json

關于electron-packager的配置，簡單介紹一下。

electron-packager   --platform= --arch= [optional flags...]

sourcedir 資源路徑，在本例中既是./dist/

appname 打包出的exe名稱

platform 平臺名稱（windows是win32）

arch 版本，本例為x64

到這里還沒有完因為還有坑呢

我就把坑跳過

將bulid的electron.js文件復制到dist中，將package.json也復制到當中（提示dist文件和里面內容自動生成不用自己創(chuàng)建）

然后修改electron.js

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

再修改復制到dist中的package.json

再啟動npm run go 會出現(xiàn)打包成功的文件夾

再從里面尋找exe文件 就可以了?。。。?！

總結

以上所述是小編給大家介紹的Electron + vue 打包桌面操作流程詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！