在macOs中的Electron-Vue如何打包为exe文件？

前言：工作中偶然接触到了Electron-Vue，在打包过程中需将文件打包为exe文件，此过程中遇见的问题记录分享一下，如果可以帮到大家就最好不过了。

一、环境

首先来看下主要环境：

$ node -v
$ v13.11.0

{
  "devDependencies": {
      "electron": "^9.1.2",
      "electron-builder": "^22.8.0",
  }
}

二、打包

1、我本机是macOS，默认打包就打包为.dmg文件，如果需要打包成Windows使用的.exe文件怎么办呢？

我们可以在package.json文件中找到build脚本命令，在后面加入 -w即可。

{
  "scripts": {
  	"build": "node .electron-vue/build.js && electron-builder -w",
  }
}

此时我们执行npm run build命令就会下载相关依赖然后打包成为.exe文件了。

三、依赖下载

如果你的网络很好，在执行npm run build命令时，下载依赖没有出错，那么打包完成后的exe文件会在dist文件夹中。如果出现下载超时，有以下的解决方式。

1、如果终端在下载electron-vx.x.x -win32-xxxx.zip文件下载过慢和超时的情况，我们可以手动去下载。

• Electron阿里云，找到对应的版本号和提示下载的文件手动下载即可。

• 下载完成后放入本机的依赖文件夹。

• macOS文件夹地址：/Users/xxx/资源库/Caches/electron
  

2、可能还会出现下载winCodeSign-x.x.x太慢或者超时的问题，同样，我们找到响应的版本手动下载放入文件夹中即可，但是有一个细节需要提一下，那就是文件下载后需要解压出来，然后放入electron文件夹根目录中。

3、基本就是这两个文件下载可能会出现问题，如果还有其他的依赖下载问题同样处理即可，不需要解压。

四、其他

期间还有一个问题是将客户端窗口默认设置为最大化，网上很多文章描述的都是全屏，在new BrowserWindow的时候添加参数fullscreen: true，如果只想让窗口最大化，这样做是不行的。

窗口最大化的实现：

import { screen } from 'electron';

function createWindow () {
  mainWindow = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height,
    maximizable: true, //最大化按钮
    minimizable: true, //最小化按钮
    resizable: false, //窗口是否可以拖拽改变大小
  })
}

五、结尾

在所有的依赖下载完成后，执行npm run build命令即可正常打包，打包完成后的.exe文件在dist文件夹中，正常安装使用即可。

希望这篇文章可以帮到大家。😘