摘要:提前準備一個項目,也可以使用初始的項目安裝到后邊有的會出現報錯,可以忽略,啟動啟動成功就可以在項目下執行下載以下依賴,會用到這個是打成文件的插件,之后要用,提前下載好獲取的資源這里我用的是太慢了將獲取到資源的復制到里面的里
提前準備一個vue項目,也可以使用初始的vue項目
vue init webpack
安裝到后邊有的會出現報錯,可以忽略,啟動npm run dev 啟動成功就可以
在vue項目下執行下載以下依賴,會用到
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
啟動成功為
啟動成功可以執行下一步
在配置打包的package.json
關于electron-packager的配置,簡單介紹一下。
electron-packager
sourcedir 資源路徑,在本例中既是./dist/
appname 打包出的exe名稱
platform 平臺名稱(windows是win32)
arch 版本,本例為x64
到這里還沒有完因為還有坑呢
我就把坑跳過
將bulid的electron.js文件復制到dist中,將package.json也復制到當中(提示dist文件和里面內容自動生成不用自己創建)
然后修改electron.js
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index.html"), protocol: "file:", slashes: true
}))
再修改復制到dist中的package.json
再啟動npm run go 會出現打包成功的文件夾
再從里面尋找exe文件 就可以了!!!!!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104951.html
摘要:翻譯一下它是一個運行時,可以像一樣這樣執行也是一個使用構建跨平臺原生桌面應用的框架。具有兩個進程,分別是主進程,以及渲染進程。 什么是 electron 官網里這么說:Electron提供了一個Nodejs的運行時,專注于構建桌面應用,同時使用web頁面來作為應用的GUI,你可以將其看作是一個由JavaScript控制的迷你版的Chromium瀏覽器。 翻譯一下:它是一個運行時,可以像...
摘要:于是乎,就想著把自己寫的這個小項目打包成桌面端,方面每次打開電腦就能看。然后繼續運行,然后白屏習慣性的首次失敗。。解決方法進入文件夾下的將其中的修改為相對路徑。再次運行,成功將的項目,顯示為桌面應用。總結至此,打包桌面端就這樣完成了。 背景 showImg(https://segmentfault.com/img/bVYowg?w=1922&h=862); 最近在學習RxJS,平時邊看...
摘要:話不多說,進入正題一安裝為了方便你以后的使用,建議全局安裝。怎么安裝就不廢話了,不會的去官網,安裝好之后也安裝一個專用的打包工具,以方便我們后面打包的時候使用。有些只能在該事件發生后才能被使用。 也許你不甘心只寫網頁,被人叫做他會寫網頁,也許你有項目需求,必須寫桌面應用,然而你只會前端,沒關系。網上的教程很多,但是很少有能說的淺顯易懂的,我盡力將electron打包應用說的清晰明了,希...
摘要:話不多說,進入正題一安裝為了方便你以后的使用,建議全局安裝。怎么安裝就不廢話了,不會的去官網,安裝好之后也安裝一個專用的打包工具,以方便我們后面打包的時候使用。有些只能在該事件發生后才能被使用。 也許你不甘心只寫網頁,被人叫做他會寫網頁,也許你有項目需求,必須寫桌面應用,然而你只會前端,沒關系。網上的教程很多,但是很少有能說的淺顯易懂的,我盡力將electron打包應用說的清晰明了,希...
閱讀 2743·2021-10-26 09:50
閱讀 2385·2021-10-11 11:08
閱讀 2128·2019-08-30 15:53
閱讀 1906·2019-08-30 15:44
閱讀 2382·2019-08-28 18:12
閱讀 2519·2019-08-26 13:59
閱讀 2852·2019-08-26 12:19
閱讀 2751·2019-08-26 12:09