vue后台项目打包成桌面应用程序（.exe）
目录（本项目基于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.js
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, // 是否隔离渲染进程
webSecurity: false, // 关闭web安全策略 配置跨域
allowRunningInsecureContent: false, // 不允许加载不安全的内容
},
});
// win.maximize(); //窗口最大化
win.show(); // 显示窗口
// 打开控制台
// win.webContents.openDevTools()
// 根据环境变量加载URL
if (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/