這篇文章主要介紹了關於Vue Electron實現簡單桌面應用,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
之前一直使用C#編寫桌面應用,也順帶寫一些Web端應用程式。最近在看node時發現常用的vscode是用electron寫的,一種想吃螃蟹的念頭就湧了上來。
在網路上找了找electron的資料,也研究了一下官方文檔,發現electron app其實就是一個chrome瀏覽器,UI全部都是使用web端技術編寫的,因為之前一直使用Vue來寫Web應用,所以自然就想到Vue Electron的組合。
在網路上找了找,居然有現成的輪子Electron-Vue,立即install使用,可是發現最後卻不那麼如人意,在最後build時,總是出錯,後來終於發現是網絡與build配置的問題。搞得人很頭痛。
於是最後決定自己動手,將Vue產生的靜態網頁與Electron結合。
1.Vue使用webpack項目,build之後在dist資料夾中會有靜態網頁生成,這樣生成的網頁放在web容器中可以正確訪問,但如果在本地直接打開引用文件路徑會出錯,後來發現是因為生成後的index.html與資源不在一個目錄層。
修改webpack專案中config/index.js為
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',
2.使用electron-quick-start快速建立一個electron項目,將上面產生的檔案複製到electron專案的根目錄下,運行項目,發現正常運作。
3.可是上一步只是在dev模式下運行,這裡使用electron-builder分發項目,全域安裝electorn-builder後,輸入electron-builder --win --ia32 --dir即可完成專案的分發。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
vue 取得頁面詳情後切換頁面時如何監聽使用者是否已修改過資訊
##JS非同步程式設計之Promise、Generator、async/await
以上是Vue+Electron實作簡單桌面應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!