首頁 > web前端 > js教程 > 主體

Vue+Electron實作簡單桌面應用

不言
發布: 2018-07-07 10:40:19
原創
2540 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板