Vue+Electron實現簡單桌面應用

cumi發表於2018-07-06
Vue

之前一直使用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為

1 build: {
2     // Template for index.html
3     index: path.resolve(__dirname, `../dist/index.html`),
4 
5     // Paths
6     assetsRoot: path.resolve(__dirname, `../dist`),
7     assetsSubDirectory: `static`,
8     assetsPublicPath: `./`,

2.使用electron-quick-start快速構建出一個electron專案，將上面生成的檔案複製到electron專案的根目錄下，執行專案，發現正常執行。

3.可是上一步僅僅是在dev模式下執行，這裡使用electron-builder分發專案，全域性安裝electorn-builder後，輸入electron-builder –win –ia32 –dir即可完成專案的分發。

轉載請註明出處:https://www.cnblogs.com/sonoda-umi/p/9273510.html

相關文章