資訊專(zhuān)欄INFORMATION COLUMN
摘要：提前準(zhǔn)備一個(gè)項(xiàng)目，也可以使用初始的項(xiàng)目安裝到后邊有的會(huì)出現(xiàn)報(bào)錯(cuò)，可以忽略，啟動(dòng)啟動(dòng)成功就可以在項(xiàng)目下執(zhí)行下載以下依賴(lài)，會(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í)行下載以下依賴(lài)，會(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
用來(lái)啟動(dòng) npm run abc
啟動(dòng)成功為
啟動(dòng)成功可以執(zhí)行下一步
在配置打包的package.json
關(guān)于electron-packager的配置，簡(jiǎn)單介紹一下。
electron-packager
sourcedir 資源路徑，在本例中既是./dist/
appname 打包出的exe名稱(chēng)
platform 平臺(tái)名稱(chēng)（windows是win32）
arch 版本，本例為x64
到這里還沒(méi)有完因?yàn)檫€有坑呢
我就把坑跳過(guò)
將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)打包成功的文件夾
再?gòu)睦锩鎸ふ襡xe文件 就可以了！?。。。?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104951.html
摘要：翻譯一下它是一個(gè)運(yùn)行時(shí)，可以像一樣這樣執(zhí)行也是一個(gè)使用構(gòu)建跨平臺(tái)原生桌面應(yīng)用的框架。具有兩個(gè)進(jìn)程，分別是主進(jìn)程，以及渲染進(jìn)程。 什么是 electron 官網(wǎng)里這么說(shuō)：Electron提供了一個(gè)Nodejs的運(yùn)行時(shí)，專(zhuān)注于構(gòu)建桌面應(yīng)用，同時(shí)使用web頁(yè)面來(lái)作為應(yīng)用的GUI，你可以將其看作是一個(gè)由JavaScript控制的迷你版的Chromium瀏覽器。 翻譯一下：它是一個(gè)運(yùn)行時(shí)，可以像...
摘要：于是乎，就想著把自己寫(xiě)的這個(gè)小項(xiàng)目打包成桌面端，方面每次打開(kāi)電腦就能看。然后繼續(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í)邊看...
摘要：話(huà)不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話(huà)了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專(zhuān)用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫(xiě)網(wǎng)頁(yè)，被人叫做他會(huì)寫(xiě)網(wǎng)頁(yè)，也許你有項(xiàng)目需求，必須寫(xiě)桌面應(yīng)用，然而你只會(huì)前端，沒(méi)關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希...
摘要：話(huà)不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話(huà)了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專(zhuān)用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫(xiě)網(wǎng)頁(yè)，被人叫做他會(huì)寫(xiě)網(wǎng)頁(yè)，也許你有項(xiàng)目需求，必須寫(xiě)桌面應(yīng)用，然而你只會(huì)前端，沒(méi)關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希...
閱讀 2822·2021-10-26 09:50
閱讀 2469·2021-10-11 11:08
閱讀 2213·2019-08-30 15:53
閱讀 1960·2019-08-30 15:44
閱讀 2456·2019-08-28 18:12
閱讀 2602·2019-08-26 13:59
閱讀 2912·2019-08-26 12:19
閱讀 2817·2019-08-26 12:09
