目录（本项目基于vue2）
1、打包成功后的样子
2、开发环境
3、开发流程（serve + build + 基础设置 + 系统托盘）
4、插件下载地址
5、打包后的配置文件:
6、镜像
1、打包成功后的样子
2、开发环境
node：14.18.1
electron：12.0.0
tips: 用13.6.9版本也可以，下面的文件中13.6.9的压缩包是通过electron镜像环境安装的
3、开发流程（serve + build + 基础设置 + 系统托盘）
1、添加electron-builder
在项目目录下运行命令：vue add electron-builder
我这边输入vue add electron-builder 提示没有vue的命令
解决办法
vue/cli卸载重装 再运行vue add electron-builder
卸载命令：npm uninstall -g @vue/cli
安装命令：npm install -g @vue/cli
vue add electron-builder下载electron时可能会失败
1、推荐使用淘宝镜像下载: npm i electron
2、也可以设置electron仓库进行安装
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
2、运行：npm run electron:serve
如下图：
3、打 包：npm run electron:build
打包报错
报错原因：
其他插件存放位置
4、插件下载地址
网络因素导致无法下载到的插件可以在下面地址进行手动下载
tips： 插件下载
https://mirrors.huaweicloud.com/electron-builder-binaries/
接下来就打包成功啦！！
如果打包出现以下跨域情况请细看下面的配置文件
5、打包后的配置文件:
background.js
"use strict";import { app, protocol, Menu, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{scheme: "app",privileges: {secure: true,standard: true,},},
]);async function createWindow() {// 获取可执行文件位置const ex = process.execPath;// 创建浏览器窗口Menu.setApplicationMenu(null); //隐藏菜单栏const win = new BrowserWindow({width: 1900, //最大宽高 不设置则自适应height: 1600,fullscreen: false, // 非全屏show: false, // 初始化不显示窗口webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, // 是否集成Node.jscontextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, // 是否隔离渲染进程webSecurity: false, // 关闭web安全策略 配置跨域allowRunningInsecureContent: false, // 不允许加载不安全的内容 },});// win.maximize(); //窗口最大化win.show(); // 显示窗口// 打开控制台// win.webContents.openDevTools()// 根据环境变量加载URLif (process.env.WEBPACK_DEV_SERVER_URL) {await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);if (!process.env.IS_TEST) win.webContents.openDevTools(); //调试工具} else {createProtocol("app"); // 使用自定义协议加载文件win.loadURL("app://./index.html"); // win.loadURL('http://192.168.0.84:8086/index.html');// 窗口准备好之后，再显示win.once("ready-to-show", function() {win.show(); // 初始化后再显示});}// 开启开机自启动ipcMain.on("openAutoStart", () => {app.setLoginItemSettings({openAtLogin: true,path: ex,args: [],});});//检查更新// handleUpdate(win, "http://192.168.2.9:9700/")
}
// 监听Electron事件
app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}
});app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();
});app.on("ready", async () => {if (isDevelopment && !process.env.IS_TEST) {try {await installExtension(VUEJS_DEVTOOLS);} catch (e) {console.error("Vue Devtools failed to install:", e.toString());}}createWindow();
});if (isDevelopment) {if (process.platform === "win32") {process.on("message", (data) => {if (data === "graceful-exit") {app.quit();}});} else {process.on("SIGTERM", () => {app.quit();});}
}
vue.config.js
module.exports = {pluginOptions: {electronBuilder: {externals: [ // 外部依赖的模块列表'ws',"clipboard","core-js","electron-log" ,"qrcode","soap","view-design","vue","vue-router","vuex","x2js"],nodeIntegration: true, // 允许在渲染进程中使用 Node.js 功能builderOptions: {nsis: {allowToChangeInstallationDirectory: true, //允许选择安装目录oneClick: false, // 非一键安装，需手动点击下一步},win: {icon: './public/icon.png', // 设置应用图标extraResources: "./static/*.html", // 额外资源publish: [{provider: 'generic', // 通用url: 'http://192.168.0.84:8086/' // 跨域地址}]},productName: 'xxx系统' // 应用名称}},},
}6、镜像
#最新 淘宝 NPM 镜像
npm config set registry https://registry.npmmirror.com#查看当前使用镜像
npm config get registry
#electron镜像
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
)
)
)