码迷,mamicode.com
首页 > 其他好文 > 详细

为 Vue 配置 electron-builder

时间:2021-04-08 13:19:42      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:builder   icon   lan   target   name   electron   文件夹   json   get   

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

为 Vue 配置 electron-builder

标签:builder   icon   lan   target   name   electron   文件夹   json   get   

原文地址:https://www.cnblogs.com/seesawgame/p/14627329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!