用electron將Vue項目打包為window和Mac桌面應(yīng)用 (electron-packager與electron-build)

1.打包準(zhǔn)備

? ? 1.在自己需要打包的vue項目中build項目包出來其爵,這里就不做解釋了
? ? 2.新建一個 exe文件夾 (名稱自己定義)
? ? 3.克隆項目 地址:git clone https://github.com/electron/electron-quick-start
? ??????

?2.配置環(huán)境

? ? 1.cd 進入 electron-quick-start 文件夾 npm install 添加依賴 (依賴包60M左右 )

? ? ?2.完成后 將步驟一種build出來的包放入?electron-quick-start 文件夾 如圖
? ??????

? ? 3.修改main.js入口文件宵喂,
? ? ? ? 修改前

? ? ? 修改后 這里 的路徑是build出來文件名稱?

? ??????

? ? 4.啟動?npm?run?start

? ??????

? ??????????? ? 項目啟動完成

3.打包

? ? ? ? 1.使用?electron-packager 方式打包付鹿,因為依賴還環(huán)境問題 現(xiàn)在只能打出window 版本 MAc版本需要使用另一種方式 。
? ? ? ? ? ? ? ?添加依賴?npm install electron-packager --save-dev?

? ??????????

? ? ? ? 2.修改package.json 中?

"scripts": {

? ? ? "start": "electron .",? ?

? ? ? "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"

? }

? ? ? 然后?npm run packager 打包?
? ??????

? ?打包完成?

? ??

? ??VEA_L-win32-x64 中的exe就是執(zhí)行文件?

注 此方法只支持打包 window 和linux 版本 mac版本不支持 (沒找到解決辦法)
? ??2.使用?electron-build?方式打包 支持window 和Mac (mac版本只有在mac os上才可打包完成 )

? ? 添加 依賴? 建議方法一
? ? ? ?方法一? 全局裝?yarn? 環(huán)境? (mac os 自行百度)?

? ??????????????????npm install -g yarn
? ? ? ?????????????安裝 依賴?yarn add electron-builder?--save-dev
? ? ? ? 方法二 npm 安裝?

? ??????????????npm install electron-builder
? ? ? ?修改?package.json 中

? "build": {"appId": "com.xxx.app", "copyright":"LEON", "productName":"亦思辰","mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"] }},

"scripts": { "start": "electron .",? ? "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", "distWin": "electron-builder --win --x64","distMac": "electron-builder --mac --x64","dist": "npm run distWin && npm run distMac"},


? ? 執(zhí)行命令 打出對應(yīng)環(huán)境包?npm run dist?

? ??

我因為是window 所以 window打包成功,macos報錯得滤,(用macOs 親測可用 ) 打包完成dist中如下?

注意 完成后 window 會出現(xiàn) 菜單欄 隱藏需要修改 main.js 如下 就可以解決?



總結(jié):以上的倆種方式都可以打包出exe方式不同奶稠,都可以配置Ioc圖標(biāo)俯艰,這里就不做演示了,有疑問歡迎提意見锌订,共同進步竹握。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市辆飘,隨后出現(xiàn)的幾起案子啦辐,更是在濱河造成了極大的恐慌谓传,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件芹关,死亡現(xiàn)場離奇詭異续挟,居然都是意外死亡,警方通過查閱死者的電腦和手機侥衬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門诗祸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人轴总,你說我怎么就攤上這事直颅。” “怎么了怀樟?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵功偿,是天一觀的道長。 經(jīng)常有香客問我往堡,道長械荷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任投蝉,我火速辦了婚禮养葵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瘩缆。我一直安慰自己关拒,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布庸娱。 她就那樣靜靜地躺著着绊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪熟尉。 梳的紋絲不亂的頭發(fā)上归露,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音斤儿,去河邊找鬼剧包。 笑死,一個胖子當(dāng)著我的面吹牛往果,可吹牛的內(nèi)容都是我干的疆液。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼陕贮,長吁一口氣:“原來是場噩夢啊……” “哼堕油!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤掉缺,失蹤者是張志新(化名)和其女友劉穎卜录,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體眶明,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡艰毒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了赘来。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片现喳。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖犬辰,靈堂內(nèi)的尸體忽然破棺而出嗦篱,到底是詐尸還是另有隱情,我是刑警寧澤幌缝,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布灸促,位于F島的核電站,受9級特大地震影響涵卵,放射性物質(zhì)發(fā)生泄漏浴栽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一轿偎、第九天 我趴在偏房一處隱蔽的房頂上張望典鸡。 院中可真熱鬧,春花似錦坏晦、人聲如沸萝玷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽球碉。三九已至,卻和暖如春仓蛆,著一層夾襖步出監(jiān)牢的瞬間睁冬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工看疙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留豆拨,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓能庆,卻偏偏與公主長得像辽装,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子相味,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容