从0开始electron+vue2搭建环境

使用环境：node版本16.16.0

搭建vue项目

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

安装electron

直接运行

vue add electron-builder

在这里插入图片描述

安装完成后，在src文件夹下多了一个background.js，这是electron的配置文件

同时在package.json中，多了启动和打包elecrton的命令
启动项目

npm run electron:serve

启动项目很慢耐心等待~（下图是启动成功了）
在这里插入图片描述

打包electron

修改路由配置（electron 只在路由模式为 hash 时页面才展示）
打包基础配置在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},},},},
});