之前一直使用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即可完成項目的分發。

Vue+Electron實現簡單桌面應用