前幾天上班無聊上網看這個好玩的東西，可以將一些單純前端的網頁app變成桌面軟體，叫做node-webkit，他的github上有比較快速入手的指南，覺得這個超有趣的，他就像一個小瀏覽器，做成執行檔，然後把你的webapp包在裡面，裡面一些系統選單的UI，他有幫你做好，覺得很酷。
如果要將Vue專案包裝成桌面應用程式，主要就是要看build之後的dist資料夾裡面的index.html能不能在本機端用file://path/to/index.html瀏覽，如果沒特別試這個的話會忽略一些東西，因為一般只會在有網頁伺服器的地方開發，以下三個地方是我遇到比較需要注意的地方
- API的存取權限，如果API有控制限制網域讀取的話，要拿掉
- router設定不能使用history模式，雖然這在網頁上一定會用，網址比較好看，但我今天試了半天才發現這個要關掉才能正常在local顯示畫面，不然就會一片空白
- 檔案存取路徑，一般使用webpack打包，存取css和js的路徑預設都會從根目錄開始，但在local要用相對路徑才找的到，不然打開就會顯示一片空白，console log會顯示ERR_FILE_NOT_FOUND，所以在vue專案可以做以下這個設定，就能讓它打包後還是相對路徑。另外在Vue Cli的專案預設是沒有設定檔的，要自己建vue.config.js在專案根目錄。
module.exports = {
baseUrl: '.'
}
以上有弄對，使用build之後，在dist資料夾裡面看index.html，直接在本地瀏覽，如果有畫面那就沒問題了。
接著在dist資料夾裡面開一個package.json檔，內容如下，這個是要給等一下要跑node-webkit用的設定json檔，可以設定視窗大小一些之類的東西，詳細可到他github上的wiki看
{
"name": "nw-demo",
"version": "0.0.1",
"main": "index.html"
}
再來就去下載node-webkit的zip檔，這是windows的打包檔，其他系統可以去他的github看，下載後解壓縮，在命令提示字元，移動到剛打包的dist資料夾，然後下指令
cd C:\Path\to\dist C:\Path\to\nw.exe .
沒意外的話就會開啟一個視窗，裡面就會有你的webapp了！
如果想將整個打包成一個執行檔，將dist資料夾底下的檔案壓縮成dist.zip檔，將dist.zip檔移到打包檔根目錄，然後下指令，他會將檔案合併起來，會產生一個執行檔，之後點這個執行檔就能執行了
copy /b nw.exe+dist.zip myapp.exe