Vue+Electron實作簡單桌面應用

這篇文章主要介紹了關於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中文網其他相關文章！