使用环境：node版本16.16.0

搭建vue项目

已有vue2的环境直接进项安装electron步骤
没有的请先移动到这里查看 vue2脚手架搭建项目流程 我就不另外记录了

安装electron

1. 直接运行

vue add electron-builder

2. 安装完成后，在src文件夹下多了一个background.js，这是electron的配置文件
   
   同时在package.json中，多了启动和打包elecrton的命令
   
3. 启动项目

npm run electron:serve

启动项目很慢 耐心等待~（下图是启动成功了）

打包electron

1. 修改路由配置（electron 只在 路由模式 为 hash 时页面才展示）
   
2. 打包基础配置 在vue.config.js添加

module.exports = defineConfig({pluginOptions: {electronBuilder: {// 打包参数配置builderOptions: {appId: "", // 应用程序IDproductName: "appName", // 安装后生成的文件夹和快捷方式的名称nsis: {oneClick: false, // 是否一键安装，如果为 false，则显示安装向导allowElevation: true, // 是否允许请求提升（以管理员身份运行）allowToChangeInstallationDirectory: true, // 是否允许用户更改安装目录createDesktopShortcut: true, // 是否在桌面上创建快捷方式// createStartMenuShortcut: true, // 是否在开始菜单中创建快捷方式shortcutName: "appName", // 快捷方式的名称uninstallDisplayName: "appName", // 卸载时显示的名称installerIcon: "./public/logo.ico", // 安装程序图标的路径 注意图片大小 分辨路32*32uninstallerIcon: "./public/logo.ico", // 卸载程序图标的路径 注意图片大小 分辨路32*32installerHeaderIcon: "./public/logo.ico", // 安装向导头部的图标路径 注意图片大小 分辨路32*32runAfterFinish: true, // 安装完成后是否运行应用perMachine: false, // 是否为所有用户安装（而非仅当前用户）},win: {icon: "./public/desktop.ico", // 注意图片大小 分辨路256*256},},},},
});

3. 启动打包

npm run electron:build

运行完成后再dist_electron文件夹下面的