构建和发布

借助强大得electron-bulider您只需要执行npm run build命令即可开始编译您当前操作系统适用的安装包

提示

需要注意的是，无论哪一个平台在编译的时候，都会下载一次打包依赖，当然这只会在你第一次构建项目时发生。 本项目只提供了win平台的打包依赖，在这里构建和发布 - 图1文件夹中，使用方法在压缩包内，自己看~

构建出web版本

当您使用yarn build:web或npm run build:web时，您应当注意的是，在web环境下是不可以存在任何和electron相关得api调用，您可以在前端中通过process.env.IS_WEB来判断当前运行环境是否处于非electron。

环境变量

在本项目中，已经在config/index.js中导入了两个状态，dev为开发环境，prod为生产环境，而axios的baseURL同样也是出于该文件夹中的dev.env.js和prod.env.js中，而在index中，您应当遵守内部的文件结构进行您自己的一些变量控制，本项目自带的有在dev下的默认端口，关闭electron垃圾信息输出，以及，控制台部分输出中文化（笑~）

  • config/index.js中的参数说明
环境名:名称类型默认值说明
build:DisableF12Booleantrue是否注册全局快捷键禁用F12
dev:removeElectronJunkBooleantrue是否关闭electron垃圾输出
dev:chineseLogBooleanfalse是否启用部分中文控制台输出
dev:portNumber9080开发时得默认端口
UseStartupChartBooleantrue是否启用启动动画
IsUseSysTitleBooleantrue是否使用系统自带得标题栏

builder配置文件说明

在该项目中，继承了原项目得单个package.json得优势，它将builder中得配置文件添加进了package.json中的build对象里大概是这样得

  1.   "build": {
  2.     "publish": [
  3.       {
  4.         "provider": "generic",
  5.         "url": "http://127.0.0.1"
  6.       }
  7.     ],
  8.     "productName": "electron-vue-admin",
  9.     "appId": "org.simulatedgreg.electron-vue",
  10.     "directories": {
  11.       "output": "build"
  12.     },
  13.     "files": [
  14.       "dist/electron/**/*"
  15.     ],
  16.     "dmg": {
  17.       "contents": [
  18.         {
  19.           "x": 410,
  20.           "y": 150,
  21.           "type": "link",
  22.           "path": "/Applications"
  23.         },
  24.         {
  25.           "x": 130,
  26.           "y": 150,
  27.           "type": "file"
  28.         }
  29.       ]
  30.     },
  31.     "mac": {
  32.       "icon": "build/icons/icon.icns"
  33.     },
  34.     "win": {
  35.       "icon": "build/icons/icon.ico",
  36.       "target": [
  37.         {
  38.           "target": "nsis",
  39.           "arch": [
  40.             "x64",
  41.             "ia32"
  42.           ]
  43.         }
  44.       ]
  45.     },
  46.     "linux": {
  47.       "icon": "build/icons"
  48.     }
  49.   }

发布时，减少打包后文件大小

发布时您可能已经注意到安装包大小为40 - ∞ MB 因受限于chromium，安装包无法压缩到30M以下；所以安装包在30-50MB大小请勿惊慌，这是正常大小。

而包大小在builder打包以后仍然在70-100MB并且页面和功能实际上没有那么多时，此时您需要注意：

  • 依赖是否都在package.json的dependencies对象中，如果是，请移除所有非runtime的依赖，builder会将dependencies对象中的所有依赖及其附属依赖全部打包起来，这就造成了明明没有写多少代码，却将整个node_module打包进来，软件本身无缘无故增加了几百兆。
  • 在builder配置文件中我设置了win默认打包出32位和64位的集合包，这也会造成软件打包出来默认就100M了因为是一个二合一的安装包(新版本已经去除这个设置) 若不想升级和自己去除的话，找到builder配置的win -> target删除arch对象即可，去除以后默认运行build命令时，则会只打包当前打包机的操作系统位数包。
  • 一些不需要立刻用到的资源可以放到服务器上，等到用户需要使用时再进行按需下载，比如：字体文件，一些不是很急用的图片，音频文件；或是使用nsis编写在线安装程序，下载以后再进行安装对用户进行一些善意的欺诈行为是允许的。

提示

介于webpack的打包，其实在渲染和主进程中只要没有引用到有关于node的模块其实是都可以不放在dependencies对象中的，因为webpack会正常打包所有你需要的代码进编译后的代码中，而一些node模块则无法被处理，这也是强调用到的node模块需要放在dependencies对象中的理由；规范使用package.json中的devDependencies和dependencies对减少包文件大小很有利。