electron + express 实现 vue 项目客户端部署

写在前面

作为一个前端程序员,如何实现从前端到客户端的跨越,可能是一个很难实现的事。但客户需求千奇百怪,偶尔遇到一个非要客户端的,如何应对?

那Electron可能真是你福音。具体它有哪些功能,可自行官网查看:Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron。这里只谈一谈最近项目中遇到的一种情况:将已有的vue项目打包成客户端

1.创建electron 项目

首先创建一个electron项目:快速入门 | Electron。

这里直接使用了脚手架: GitHub - electron/electron-quick-start: Clone to try a simple Electron app。

也可以根据官网自己搭建。

执行以下命令安装 脚手架 :

npm install 

如果安装过程中卡住,可尝试设置以下环境变量

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
npm run start 启动

2.创建express项目

为什么要用express 框架?其实直接启动electron+vue的dist包,静态部署也可以。需要的参考这个Electron学习记录(二)-在Electron中使用vue3_electron使用vue-CSDN博客

但项目中一般都以服务的形式部署,静态部署多少有些资源读取的问题。这里增加了express框架,轻量,方便。

初始化express项目

使用express-generator搭建

npm install express-generator -g
express express-project
创建一个名为express-project的项目

把项目整体放到electron项目的根目录。

3.修改配置,打包启动

(1)在main.js 增加express 启动项目,基本可以理解为把exprss-project项目下bin/www的内容迁移打main.js中。

(2)将vue项目的dist包放到exprss-project项目下,比如public目录下。

打包前记得修改.env.production 文件中的后端接口配置,例如:

VUE_APP_BASE_API = '/prod-api'

改为以下形式:

VUE_APP_BASE_API = 'http://{ip}:{port}/prod-api'

(3)修改exprss-project项目下bin/app.js 内容

OK。执行,不出意外的,会自动启动客户端了。

(4)最后一步,打包成软件

package.json中添加

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ my-app --platform=win32 --arch=x64 --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git"
  },

执行npm run packager,打包成软件。

这样基本实现了vue项目的客户端化,当然,别忘了起后端服务。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux 命令之diff工具的使用

linux 命令之diff工具的使用 -u:表示在比较结果中输出上下文中一些相同的行,有利于查看文件区别,有和----提示 -r:表示递归比较各个子目录下的文件 -N:将不存在的 -w:ignore空格的比较 -B:ignore空行的比较 创建两个文件,文件一:文件一: 『1』大学之道在明明德&a…

52771-009P 同轴连接器

型号简介 52771-009P是Southwest Microwave的连接器。这款连接器外导体外壳、耦合螺母和电缆夹紧螺母都采用了不锈钢 UNS-S30300 材料。不锈钢具有优异的耐腐蚀性和机械强度,能够保证连接器在各种恶劣环境下都能稳定工作。 型号特点 中心触点、外壳、衬套固定环&am…

HIS系统,云HIS系统源码,一款适用于公立二级以下医院、专科医院和社区卫生机构的综合性医院信息系统

医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、财务管理、物资管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过…

【YOLOv8】 用YOLOv8实现数字式工业仪表智能读数(一)

上一篇圆形表盘指针式仪表的项目受到很多人的关注,咱们一鼓作气,把数字式工业仪表的智能读数也研究一下。本篇主要讲如何用YOLOV8实现数字式工业仪表的自动读数,并将读数结果进行输出,若需要完整数据集和源代码可以私信。 目录 &…

springboot零食盒子-计算机毕业设计源码50658

目 录 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 微信小程序的零食盒子系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 微信…

postgres 的dblink使用,远程连接数据库

一.安装下载 dblink create extension if not exists dblink 查看是否已经安装 select * from pg_extension;二.运行,查询数据 其中,第一个参数是dblink名字,也可以是连接字符串。 第二个参数是要执行的SQL查询语句。AS子句用于指定返回结…

FastAPI 学习之路(三十九)对开发接口进行测试

概况 对于开发好的接口需要进行测试之后才能发布。当我们在开发的时候,没有提前测试,我们也要对我们自己的接口进行测试,那么FastApi自身也带有针对开发的接口进行测试的功能。我们看下FastApi官方给我们提供了什么样的支持。 接口还是基于…

zerotier-one自建根服务器方法 六

一、简介 前面几篇文章已经写完了自己建立服务器的方法与常见问题,今天就写一下服务器备份与迁移吧。 二、准备工作 准备一个有公网IP的云主机。 要稳定性、安全性、不差钱的可以使用阿里、腾讯等大厂的云服务器。 本人穷屌丝一枚,所以我用的是免费的“…

一.9 重要主题

在此,小结一下我们旋风式的系统漫游。这次讨论得出一个很重要的观点,那就是系统不仅仅只是硬件。系统是硬件和系统软件互相交织的集合体。它们必须共同协作以达到运行应用程序的最终目的。本书的余下部分会讲述硬件和软件的详细内容,通过了解…

中国AI大模型,谁是实力派

继2022年11月,OpenAI发布旗下AI聊天机器人应用ChatGPT后,大模型逐渐走入公众视野。2023年被视为中国大模型的发展元年。 这一年里,中国本土厂商、各大科技巨头、科研院所、初创公司都纷纷下场,部署自己的大模型。从优化算法全面追…

Linux 忘记root密码,通过单用户模式修改

银河麒麟桌面操作系统 V10(sp1)”忘记用户密码,需要修改用户密码所写,可用于 X86 架构和 arm 架构。 2. 选择第一项,在上图界面按“e”键进行编辑修改。 3. 在以 linux 开头这行的行末,添加“init/bin/bas…

充气膜游泳馆安全吗—轻空间

充气膜游泳馆,作为一种新型的游泳场馆,以其独特的结构和众多优点,逐渐受到各地体育设施建设者的青睐。然而,关于充气膜游泳馆的安全性,一些人仍然心存疑虑。那么,充气膜游泳馆到底安全吗?轻空间…

基督教堂变身“知识网红”!枢纽云助力传统教堂数智化升级

随着互联网技术的发展,知识获取的方式悄然发生了改变。传统的书籍、课堂教学等知识传递模式逐渐被线上课程、电子书、知识付费平台等新形式所补充和替代。知识付费,作为一种新兴的知识传播和变现模式,迅速崛起并受到广泛关注和欢迎。 何为知…

PyTorch实现BERT预训练模型转化指南

huggingface官方的介绍: https://huggingface.co/transformers/converting_tensorflow_models.html 直接用命令行 把箭头处路径改为自己放原有tf版本预训练模型的路径 回车后会有一大堆提示,然后发现路径下多了一个bin文件,加上原本的config…

[图解]企业应用架构模式2024新译本讲解25-层超类型

1 00:00:01,820 --> 00:00:03,730 层超类型这个模式 2 00:00:03,740 --> 00:00:07,590 它是属于基本模式之一了 3 00:00:07,880 --> 00:00:10,270 第18章的基本模式之一 4 00:00:13,560 --> 00:00:14,590 定义是这样的 5 00:00:15,160 --> 00:00:16,070 &am…

MySQL黑马教学对应视屏笔记分享之聚合函数,以及排序语句的讲解笔记

聚合函数 注意:null值不参与聚合函数的计算。 分组查询 2.where与having的区别 执行时机不同:where是在分组之前进行过滤,不满足where条件,不参与分组;而having是分组之后对结果进行过滤。判断条件不同:w…

代替EXCEL-ReoGrid .NET开源快速、强大的电子表格组件

今天大姚给大家分享一个.NET开源(MIT License)、快速、强大、免费的电子表格组件,支持数据格式、冻结、大纲、公式计算、图表、脚本执行等。兼容 Excel 2007 (.xlsx) 格式,支持WinForm、WPF和Android平台:ReoGrid。 项…

新型球幕影院:可移动式大空间的未来—轻空间

随着科技的不断进步和人们对多样化娱乐需求的提升,新型球幕影院作为一种创新的观影方式,逐渐进入大众视野。它不仅提供了沉浸式的视觉体验,还拥有可移动式大空间的特点,适应多种使用场景。轻空间将详细介绍新型球幕影院的独特优势…

LVS实验

LVS实验 nginx1 RS1 192.168.11.137 nginx2 RS2 192.168.11.138 test4 调度器 ens33 192.168.11.135 ens36 12.0.0.1 test2 客户端 12.0.0.10 一、test4 配置两张网卡地址信息 [roottest4 network-scripts]# cat ifcfg-ens33 TYPEEthernet BOOTPROTOstatic DEFROUTEyes DEVIC…

sql常用语句:

1.联合查询 对表中的数据进行限制; 2.从一个表复制到另一个表 SELECT INTO 将数据复制到一个新表(有的 DBMS 可以覆盖已经存在的表,这依赖于 所使用的具体 DBMS) SELECT *(字段) INTO CustCopy FROM Cu…