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爲

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便可完成項目的分發。

轉載請註明出處:http://www.javashuo.com/article/p-bkjhlxko-w.html