使用 electron 把 vue 项目打包成客户端

1. 新建一个Vue项目

        新建一个vue项目,或者在已经写好的vue项目上操作

2. 安装依赖包

        需要安装的包有2个

        electron

        electron-builder

        安装失败的,可看另外一篇解决方法https://blog.csdn.net/Anorry/article/details/144061069?spm=1001.2014.3001.5501

3. 在项目根目录创建文件夹,存放文件

在根目录新建 electron 文件夹,文件夹下存放两个文件:main.js(主进程)、preload.js(渲染进程)

main.js

const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;function createWindow() {Menu.setApplicationMenu(null);// 创建浏览器窗口const mainWindow = new BrowserWindow({show: false,minWidth: 1440,minHeight: 900,webPreferences: {partition: String(+new Date()),preload: path.join(__dirname, "preload.js"),},});mainWindow.maximize();mainWindow.show();// 如果是开发环境就把当前运行的web端口做成客户端预览// 如果是生产环境就把打包后的index做成客户端预览mainWindow.loadURL(NODE_ENV === "development"? "http://localhost:8080": `file://${path.join(__dirname, "../dist/index.html")}`);
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow();app.on("activate", function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on("window-all-closed", function () {if (process.platform !== "darwin") app.quit();
});

preload.js

window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}})

4. 在 vite.config.js 内配置

配置基本路径 ./ 防止出现打包后打开页面空白

publicPath: './',
transpileDependencies: true,

5. 在 package.json 内配置入口文件,配置一下运行命令

"main": "electron/main.js","electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .",

6. 安装两个库

  • cross-env:该库让开发者只需要注重环境变量的设置,而无需担心平台设置
  • wait-on:等待资源,此处用来等待url可访问

为了使项目和electron正常运行,需要先运行项目,使得其开发服务器的url可以正常访问,然后再开启electron去加载url。

此处需要安装两个库

7. 配置electron打包命令和配置项

在前面我们安装了 electron-builder 依赖,所以这里无需安装

把下面代码,放到 package.json 内,与 dependencies 同级

"build": {"appId": "com.test","productName": "electron打包测试","copyright": "Copyright © 2023","mac": {"category": "public.app-category.utilities","icon": "public/icons/icon.icns"},"win": {},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"}}

"electron:build": "vite build  --mode production && electron-builder",

8. 运行命令 npm run electron:build 打包

打包成功后,会在根目录出现一个 dist_electron 文件夹,文件夹下会有一个 .exe 应用程序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

六大排序算法:插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序

本章讲述数据结构中的六大排序算法 欢迎大佬们踊跃讨论,感谢大家支持! 我的博客主页链接 六大排序算法 一.插入排序1.1 直接插入排序1.2 希尔排序 二.选择排序2.1 单向选择排序2.2双向选择排序2.3 堆排序 三.交换排序3.1 冒泡排序3.2 快速排序3.2.1 Hoa…

el-table手动触发懒加载

二次修改了一下,确保点击某一单元格格元素触发 // 隐藏懒加载箭头后手动触发懒加载 expandRows(scope){scope.row.isExpanded !scope.row.isExpanded // 切换展开状态let isExpanded scope.row.isExpandedconst { table: { toggleRowExpansion, store }} this.$r…

【MySQL】数据库 Navicat 可视化工具与 MySQL 命令行基本操作

💯 欢迎光临清流君的博客小天地,这里是我分享技术与心得的温馨角落 💯 🔥 个人主页:【清流君】🔥 📚 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 📚 🌟始终保持好奇心&…

threejs相机辅助对象cameraHelper

为指定相机创建一个辅助对象,显示这个相机的视锥。 想要在场景里面显示相机的视锥,需要创建两个相机。 举个例子,场景中有个相机A,想要显示相机A的视锥,那么需要一个相机B,把B放在A的后面,两个…

反向代理-缓存篇

文章目录 强缓存一、Expires(http1.0 规范)二、cache-control(http1.1 出现的 header 信息)Cache-Control 的常用选项Cache-Control 常用选项的选择三、弊端协商缓存一、ETag二、If-None-Match三、Last-modified四、If-Modified-Since浏览器的三种刷新方式静态资源部署策略…

深度学习小麦头检测-基于Faster-RCNN的小麦头检测——附项目源码

比赛描述 为了获得有关全世界麦田的大量准确数据,植物科学家使用“小麦头”(包含谷物的植物上的穗)的图像检测。这些图像用于估计不同品种的小麦头的密度和大小。但是,在室外野外图像中进行准确的小麦头检测可能在视觉上具有挑战性。密集的小麦植株经常重叠,并且风会使照片…

健康管理系统(Koa+Vue3)

系统界面(源码末尾获取) 系统技术 Vue3 Koa Nodejs Html Css Js ....... 系统介绍 系统比较简单,轻轻松松面对结业课堂作业.采用的是基于nodejs开发的Koa框架作为后端,采用Vue框架作为前端,完成快速开发和界面展示. 系统获取 啊啊啊宝/KoaVue3https://gitee.com/ah-ah-b…

数据清洗代码:缺失值,异常值,离群值Matlab处理

目录 基本介绍程序设计参考资料基本介绍 一、过程概述 本过程适用于处理SCADA系统采集到的数据,以及具有类似需求的数据集。处理步骤包括缺失值处理、异常值处理和离群值处理,旨在提升数据质量,增强数据的相关性,同时保持数据的原始特征和随机性。 二、缺失值处理 对于SC…

Leetcode 每日一题 202.快乐数

目录 题意 算法思路 过题图片 算法实现 代码解析 复杂度分析 题目链接 结论 题意 判断正整数 n 是不是快乐数。 快乐数定义: (1)每次将正整数替换为它每个位置上的数字的平方和。 (2)重复这个过程直到这个数…

【鸿蒙生态崛起】开发者如何把握机遇,应对挑战,打造卓越应用体验?

文章目录 每日一句正能量前言鸿蒙简析鸿蒙生态的认知和了解鸿蒙生态的崛起分析 鸿蒙生态下开发时遇到的挑战开发工具不完善技术难度生态竞争抓住机遇、应对挑战 鸿蒙生态未来的发展趋势1. 全场景智慧生活的推动者2. 技术创新的引领者3. 开放合作的倡导者对鸿蒙生态和开发者的建…

Nignx部署Java服务测试使用的Spring Boot项目Demo

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

文本域设置高度 加上文字限制并show出来:

文本域设置高度 :rows"4" 加上文字限制并show出来&#xff1a; maxlength"30" show-word-limit 效果: <el-form-item label"产品备注" prop"remark"><el-input v-model"form.remark" type"textarea"…

区块链软件系统海外宣发:全球化市场中的策略与实施

随着区块链技术的快速发展&#xff0c;越来越多的区块链软件系统进入全球市场&#xff0c;涉及加密货币、智能合约、去中心化金融&#xff08;DeFi&#xff09;、供应链管理等多个行业应用。为了在激烈的竞争中脱颖而出&#xff0c;区块链软件系统不仅需要具备卓越的技术能力&a…

springboot413福泰轴承股份有限公司进销存系统(论文+源码)_kaic

摘 要 使用旧方法对福泰轴承股份有限公司进销存系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在福泰轴承股份有限公司进销存系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不…

qiankun学习记录

什么是微前端 微前端是指存在于浏览器中的微服务&#xff0c;其借鉴了微服务的架构理念&#xff0c;将微服务的概念扩展到了前端。 如果对微服务的概念比较陌生的话&#xff0c;可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块&#xff0c;每个微前端模块可以…

配置中心 选型 : Apollo Vs. Nacos Vs. spring cloud config

为什么我们需要一个微服务配置中心&#xff1f; 首先&#xff0c;我们可以想象下&#xff0c;如果没有配置中心&#xff0c;我们的项目可能是这样的&#xff1a;不同环境的配置文件都放在项目里面&#xff0c;部署时可以通过启动参数来指定使用哪个环境的配置。 这种方式有两…

HarmonyOS(65) ArkUI FrameNode详解

Node 1、Node简介2、FrameNode2.1、创建和删除节点2.2、对FrameNode的增删改2.3、 FramNode的查询功能3、demo源码4、总结5、参考资料1、Node简介 在HarmonyOS(63) ArkUI 自定义占位组件NodeContainer介绍了自定义节点复用的原理(阅读本本篇博文之前,建议先读读这个),在No…

详解RabbitMQ在Ubuntu上的安装

​​​​​​​ 目录 Ubuntu 环境安装 安装Erlang 查看Erlang版本 退出命令 ​编辑安装RabbitMQ 确认安装结果 安装RabbitMQ管理界面 启动服务 查看服务状态 通过IP:port访问 添加管理员用户 给用户添加权限 再次访问 Ubuntu 环境安装 安装Erlang RabbitMq需要…

vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转

先上效果&#xff0c;代码在下面 <template><!-- 图片列表 --><div class"image-list"><img:src"imageSrc"v-for"(imageSrc, index) in images":key"index"click"openImage(index)"error"handleI…

【计算机网络】实验12:网际控制报文协议ICMP的应用

实验12 网际控制报文协议ICMP的应用 一、实验目的 验证ping命令和tracert命令的工作原理。 二、实验环境 Cisco Packet Tracer模拟器 三、实验过程 1.构建网络拓扑并进行信息标注&#xff0c;将所需要配置的IP地址写在对应的主机或者路由器旁边&#xff0c;如图1所示。 图…