成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Electron + vue 打包桌面操作 流程

idealcn / 2317人閱讀

摘要：提前準(zhǔn)備一個(gè)項(xiàng)目，也可以使用初始的項(xiàng)目安裝到后邊有的會(huì)出現(xiàn)報(bào)錯(cuò)，可以忽略，啟動(dòng)啟動(dòng)成功就可以在項(xiàng)目下執(zhí)行下載以下依賴，會(huì)用到這個(gè)是打成文件的插件，之后要用，提前下載好獲取的資源這里我用的是太慢了將獲取到資源的復(fù)制到里面的里

提前準(zhǔn)備一個(gè)vue項(xiàng)目，也可以使用初始的vue項(xiàng)目
vue init webpack
安裝到后邊有的會(huì)出現(xiàn)報(bào)錯(cuò)，可以忽略，啟動(dòng)npm run dev 啟動(dòng)成功就可以

在vue項(xiàng)目下執(zhí)行下載以下依賴，會(huì)用到
cnpm install electron --save-dev
cnpm install electron-packager --save-dev //這個(gè)是打成exe文件的插件，之后要用，提前下載好
獲取Electron的資源
git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //這里我用的是cnpm,npm太慢了

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

然后修改


將assetsPublicPath: "/" 改為./，都是為了獲取準(zhǔn)確的路徑
然后再修改electron.js

改為 這個(gè)pathname: path.join(__dirname, "../dist/index.html")
不懂的可以去搜vue 的 dist

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

用來啟動(dòng) npm run abc

啟動(dòng)成功為

啟動(dòng)成功可以執(zhí)行下一步
在配置打包的package.json

關(guān)于electron-packager的配置，簡單介紹一下。
electron-packager --platform= --arch= [optional flags...]

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

appname 打包出的exe名稱

platform 平臺(tái)名稱（windows是win32）

arch 版本，本例為x64

到這里還沒有完因?yàn)檫€有坑呢
我就把坑跳過

將bulid的electron.js文件復(fù)制到dist中，將package.json也復(fù)制到當(dāng)中（提示dist文件和里面內(nèi)容自動(dòng)生成不用自己創(chuàng)建）
然后修改electron.js

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true

}))
再修改復(fù)制到dist中的package.json

再啟動(dòng)npm run go 會(huì)出現(xiàn)打包成功的文件夾
再從里面尋找exe文件 就可以了！?。。。?/p>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104951.html

相關(guān)文章

  • 使用 electron-vue 構(gòu)建你的桌面應(yīng)用

    摘要：翻譯一下它是一個(gè)運(yùn)行時(shí)，可以像一樣這樣執(zhí)行也是一個(gè)使用構(gòu)建跨平臺(tái)原生桌面應(yīng)用的框架。具有兩個(gè)進(jìn)程，分別是主進(jìn)程，以及渲染進(jìn)程。 什么是 electron 官網(wǎng)里這么說：Electron提供了一個(gè)Nodejs的運(yùn)行時(shí)，專注于構(gòu)建桌面應(yīng)用，同時(shí)使用web頁面來作為應(yīng)用的GUI，你可以將其看作是一個(gè)由JavaScript控制的迷你版的Chromium瀏覽器。 翻譯一下：它是一個(gè)運(yùn)行時(shí)，可以像...

    qieangel2013 評(píng)論0 收藏0

  • electron 將pc端（vue）頁面打包為桌面端應(yīng)用

    摘要：于是乎，就想著把自己寫的這個(gè)小項(xiàng)目打包成桌面端，方面每次打開電腦就能看。然后繼續(xù)運(yùn)行，然后白屏習(xí)慣性的首次失敗。。解決方法進(jìn)入文件夾下的將其中的修改為相對(duì)路徑。再次運(yùn)行，成功將的項(xiàng)目，顯示為桌面應(yīng)用?？偨Y(jié)至此，打包桌面端就這樣完成了。 背景 showImg(https://segmentfault.com/img/bVYowg?w=1922&h=862); 最近在學(xué)習(xí)RxJS，平時(shí)邊看...

    Dongjie_Liu 評(píng)論0 收藏0

  • electron原來這么簡單----打包你的react、VUE桌面應(yīng)用程序

    摘要：話不多說，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫網(wǎng)頁，被人叫做他會(huì)寫網(wǎng)頁，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒關(guān)系。網(wǎng)上的教程很多，但是很少有能說的淺顯易懂的，我盡力將electron打包應(yīng)用說的清晰明了，希...

    shevy 評(píng)論0 收藏0

  • electron原來這么簡單----打包你的react、VUE桌面應(yīng)用程序

    摘要：話不多說，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫網(wǎng)頁，被人叫做他會(huì)寫網(wǎng)頁，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒關(guān)系。網(wǎng)上的教程很多，但是很少有能說的淺顯易懂的，我盡力將electron打包應(yīng)用說的清晰明了，希...

    suemi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<