為 Vue 配置 electron-builder

這幾天試着用 Vue 3 做一個 electron app, 發現了新坑。

之前用 React 開發的時候，竟沒意識到為何 electron-builder 不需要針對目錄做配置就能直接使用。我就跟着教程在 package.json 里寫了：

"build": {
  "appId": "AppName",
  "productName": "AppName",
  "mac": {
    "category": "Utilities"
  }
}

和沒寫一樣……為什么 electron-build 會知道去打包 react 生成的 build 文件夾？

原來，electron-builder 只要檢測到 react-scripts, 就會默認使用針對 React 的配置，詳見：https://stackoverflow.com/a/61119994/6429264

就是說，不用配置，他也會自動用 build 文件夾去打包程序，唯一必要的配置就是 package.json 里的 main 了。而我用了 Vue, Electron 就默認把我的 src 文件夾打包了，直接一片白屏，令我困惑良久，解壓 app.asar 后才知打包錯誤。

如何正確配置呢？

Vue 雖然可以通過 vue add electron-builder 一鍵配置，但我一開始不知道，后來添加了之后又跑不起來，無奈只能自己寫了。我沒有繼續在 package.json 中配置，而是另外創建了一個配置文件 electron-builder.yml, 其中必要的一些配置為：

productName: AppName
appId: cn.cronoworks.AppName
directories:
  output: dist
  buildResources: assets
# asar: false
files:
  - filter:
    - build/**/*
extraMetadata:
  main: build/electron.js
win:
  target: nsis
  icon: build/logo256.png

其中打包目錄( output ) 目錄我改為了 dist. 本來這是 Vue 默認的 build 目錄，現在把 Vue 的 build 目錄改為 build (build/**/* )，一方面和以前 React 項目一致，另一方面真正的 distribution 已經從 Vue 項目變成了 Electron 項目，是故改名。配置中的 asar: false 可以讓程序不壓縮 build 文件夾，方便查看 Electron 是否正確打包，production 版本應注釋掉此選項。

具體配置參加官方文檔：electron-builder