Electron打包Vue项目为Windows应用（.exe）

一、安装打包插件

        1、安装Git软件下载代码

        2、安装Node.js软件（node-v14.21.3-x64.msi）

二、把Electron的官方例子下载下来

# 使用命令行下载示例代码
git clone https://github.com/electron/electron-quick-start

# 进入下载代码目录
cd electron-quick-start

三、打包Vue项目，将打包出来的dist文件夹复制到electron-quick-start文件夹中

四、修改main.js，修改默认配置

// main.js 原始内容 
mainWindow.loadFile('index.html') 

// Vue项目修改内容 
mainWindow.loadFile('./dist/index.html') 

// 访问网址修改内容
mainWindow.loadURL('https://www.baidu.com')

五、隐藏菜单及其它配置

# 以下配置按需配置，插入位置详见下面图片

const path = require('path')
const electron = require('electron')
const Menu = electron.Menu

# 隐藏菜单栏
Menu.setApplicationMenu(null)

# 忽略证书错误
app.commandLine.appendSwitch('--ignore-certificate-errors','true');

六、指行安装并预览效果

# 国内网络下载electron可能很慢，建议设置

# 使用官方Npm镜像
npm config set registry https://registry.npmjs.org

# 使用淘宝Npm镜像
npm config set registry https://registry.npmmirror.com/

# 腾讯云Npm镜像
npm set registry https://mirrors.cloud.tencent.com/npm/

# 华为云Npm镜像
npm set registry https://repo.huaweicloud.com/repository/npm/

# 查看Npm镜像设置
npm config get registry

# 执行安装（提供详细输出请使用：npm install --verbose）
npm install 

# 运行程序
npm run start 


# 清理Npm缓存，需要时使用
npm cache clean --force

七、下载打包需要的依赖electron-packager

# 安装打包所需依赖
npm install electron-packager --save-dev

八、修改package.json文件，配置打包Exe所需参数

# 增加packager指令，并确保前面有，号
"scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ MyApp --platform=win32 --arch=ia32 --icon=./favicon.ico --overwrite"
  },

这里的参数说明：

• . 是当前目录的路径。

• MyApp 是打包后应用的名称。

• --platform=win32 指定目标平台（例如win32、darwin、linux）。

• --arch=x64 指定目标架构（x64或arm64）。

• --icon=path/to/your/icon.ico 指定应用的图标文件路径（Windows）。

• --overwrite 如果目标目录已存在，则覆盖它

九、运行命令打包，然后项目中会出现一个文件夹，文件夹里面有一个App.exe文件，这个App.exe文件就是项目的启动文件

npm run packager