为 Vue 配置 electron-builder

这几天试着用 Vue 3 做一个 electron app, 发现了新坑。之前用 React 开发的时候，竟没意识到为何 electron-builder 不需要针对目录做配置就能直接使用。我就跟着教程在 package.json 里写了：build: {appId: ...

这几天试着用 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