当前位置：首页 > news >正文

vue后台项目打包成桌面应用程序（.exe）

news 来源：原创 2024/9/21 2:38:29

目录（本项目基于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/