將Vue專案改成桌面應用程式 使用node-webkit

前幾天上班無聊上網看這個好玩的東西,可以將一些單純前端的網頁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資料夾底下的檔案壓縮成.zip檔,然後再改副檔名成.nw,然後下指令,他會將檔案合併起來,會產生一個執行檔,這個執行檔要放在剛下載打包檔的根目錄,它會需要打包檔裡面一些相關的執行檔才能執行,之後點執行檔就能執行了

copy /b nw.exe+demo.zip myapp.exe

 

Leave a Reply

你的電子郵件位址並不會被公開。