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