在 vite+vue3+electron 中使用 express

文章目录

      • 一、Vite + Vue3 + Electron 项目的搭建
      • 二、搭建 express 环境
        • 1、安装 express 框架所需依赖
        • 2、创建 express 项目
        • 3、配置路由
        • 4、启动 express 服务
        • 5、启动 electron 并获取数据
      • 三、项目打包

一、Vite + Vue3 + Electron 项目的搭建

详细的项目构建和打包可参考另一篇文章:

使用 electron-vite-vue 构建 electron + vue3 项目并打包

二、搭建 express 环境

1、安装 express 框架所需依赖

yarn add express cors morgan cookie-parser

根据自身情况下载相关依赖包。

2、创建 express 项目

在项目根目录下创建一个 server 文件夹,项目目录结构如下:

项目目录结构

如果 express 项目是基于 express-generator 构建的,只需将 app.js 文件修改成 app.ts 再做部分修改即可。

完整的 app.ts 文件内容如下:

var express = require('express');
var appPath = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');// 加载路由文件
const indexRouter = require(appPath.join(__dirname,'./routes/index.ts'));var app = express();// 解决跨域
app.use(cors());app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());app.use('/api/index', indexRouter);// ----------------------
const http = require("http");
const server = http.createServer(app);
// var port = normalizePort(process.env.PORT || "3000");// 导出启动服务器的函数
async function startServer(port) {app.set("port", port);return new Promise((resolve, reject) => {server.listen(port, () => {console.log(`Server listening on port ${port}`);resolve(server);});server.on("error", (error) => {reject(error);});});
}// 停止服务器
async function stopServer() {return new Promise((resolve) => {server.close(() => {console.log("Server stopped");resolve('');});});
}module.exports = {startServer,stopServer
};

该文件的内容是基于 express-generator 构建后生成的 app.js 文件并结合了 bin/www 文件的部分内容。此处导出启动服务器的函数,便于后续启动 electron 时一并启用该服务。

3、配置路由

可以在 server/routes 文件夹下创建一个 index.ts 文件,文件内容如下:

const router = require('express').Router();router.get('/', function (req, res) {res.send('hello express !!!');
});module.exports = router;
4、启动 express 服务

可根据需要安装 get-port,用于监听可用端口,避免端口出现冲突导致服务无法启动:

yarn add get-port

修改 electron/main.ts 文件,导入 express 启动服务相关函数:

// electron/main.ts
import { app, BrowserWindow } from "electron";
import { createRequire } from "node:module";
import { fileURLToPath } from "node:url";
import path from "node:path";// get-port => 查找可用端口
import getPort, { portNumbers } from "get-port";const require = createRequire(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));// 导入 express 启动服务函数
const { startServer, stopServer } = require(path.join(__dirname, "../server/app.ts"));

启动服务:

// electron/main.ts
function createWindow() { ... }...app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();win = null;// 停止 express 服务stopServer();}
});app.whenReady().then(async () => {try {// 使用 getPort 查找可用端口 (范围 3000 ~ 3100)const port = await getPort({ port: portNumbers(3000, 3100) });// 启动 express 服务await startServer(port);createWindow();} catch (error) {console.error("Failed to start server:", error);}
});
5、启动 electron 并获取数据

为了测试是否能够获取 express 中的数据,可以在 Vue3 中安装并使用 axios 获取数据,修改 App.vue 文件内容如下:

<script setup lang="ts">
import { onMounted } from "vue";
import axios from "axios";onMounted(async () => {let res = await axios.get('http://localhost:3000/api/index');console.log(res);
})
</script>

在 electron 中查看接收的数据:

获取数据

注意:杀毒软件(如:火绒)或防火墙可能拦截相关请求,应允许相关请求。

三、项目打包

打包后启动程序可能出现相关模块无法找到的问题,可尝试修改以下配置文件后再打包。

修改 tsconfig.json 文件夹下的 include 参数:

"compilerOptions": { ... },
"include": ["server/**/*.ts","src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "electron"],

修改打包配置文件 electron-builder.json5 中的 files 属性:

"files": ["dist","dist-electron","server/**/*"
]

说明: 每次修改 server 文件中的内容都需要手动重启 electron,可以在 electron/main.ts 中任意空白位置敲空格再保存即可实现自动重启,暂时还不清楚怎么实现 express 的热更新…

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

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

相关文章

c语言 Program to print pyramid pattern (打印金字塔图案的程序)

编写程序打印由星星组成的金字塔图案 例子 &#xff1a; 输入&#xff1a;n 6输出&#xff1a; * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 我们强烈建…

MATLAB科研数据可视化教程

原文链接&#xff1a;MATLAB科研数据可视化https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247609462&idx3&snf7043936fc5ee42b833c7c9f3bcd24ba&chksmfa826d91cdf5e4872eb275e5319b66ba6927ea0074fb2293fe1ca47d6aedf38ab91050be484c&token1551213…

k8s集群 安装配置 Prometheus+grafana

k8s集群 安装配置 Prometheusgrafana k8s环境如下&#xff1a;机器规划&#xff1a; node-exporter组件安装和配置安装node-exporter通过node-exporter采集数据显示192.168.40.180主机cpu的使用情况显示192.168.40.180主机负载使用情况 Prometheus server安装和配置创建sa账号&…

Redis中数据分片与分片策略

概述 数据分片是一种将数据分割并存储在多个节点上的技术&#xff0c;可以有效提高系统的扩展性和性能。在Redis中&#xff0c;数据分片主要用于解决单个实例存储容量和性能瓶颈的问题。通过将数据分散存储到多个Redis节点中&#xff0c;可以将负载均衡到不同的服务器上&#…

ArcGIS Enterprise 命令行组件创建配置

1. 创建ArcGIS Server站点 使用 createsite工具 命令行直接执行 createsite.sh [-u <arg>] [-p <arg>] [-d <arg>] [-c <arg>]执行文件 createsite.sh [-f <FILE>]安装目录下会有类似的创建站点文件&#xff1a; 修改其中的内容&#xff0c;…

芯片基础 | Verilog结构级描述和操作符(上)

术语定义(Terms and Definitions) 结构描述(Structural Modeling) 用门及门的连接描述器件的功能基本单元(primitives原语) Verilog语言已定义的具有简单逻辑功能的功能模型(models)结构描述 结构描述等价于逻辑图,它们都是连接简单元件来构成更为复杂的元件;Verilog使用其连接…

PDF小工具poppler

1. 简介 介绍一下一个不错的PDF库poppler。poppler的官网地址在:https://poppler.freedesktop.org/ 它是一个PDF的渲染库,顾名思义,它的用途就是读取PDF文件,然后显示到屏幕(显示到屏幕上只是一种最狭义的应用,包括使用Windows上的GDI技术显示文件内容,当然可以渲染到…

智慧水利:迈向水资源管理的新时代,结合物联网、云计算等先进技术,阐述智慧水利解决方案在提升水灾害防控能力、优化水资源配置中的关键作用

本文关键词&#xff1a;智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

海外社媒矩阵为何会被关联?如何IP隔离?

在当今的数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。通过社交媒体&#xff0c;人们可以与朋友互动&#xff0c;分享生活&#xff0c;甚至进行业务推广和营销。然而&#xff0c;社交媒体账号关联问题逐渐受到广泛关注。社交媒体账号为何会关联&#…

C++ | Leetcode C++题解之第239题滑动窗口最大值

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> maxSlidingWindow(vector<int>& nums, int k) {int n nums.size();vector<int> prefixMax(n), suffixMax(n);for (int i 0; i < n; i) {if (i % k 0) {prefixMax[i] num…

Oralce笔记-解决Oracle18c中ORA-28001: 口令已经失效

远程已经连不上了&#xff0c;需要登陆到安装Oracle的机器&#xff0c;使用sqlplus直接连。 sqlplus / as sysdba 登陆进去后修改期限为无限制&#xff1a; ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED 对于已经告警提示密码已过期的数据库&#xff0c;需要…

【网络文明】关注网络安全

在这个数字化时代&#xff0c;互联网已成为我们生活中不可或缺的一部分&#xff0c;它极大地便利了我们的学习、工作、娱乐乃至日常生活。然而&#xff0c;随着网络空间的日益扩大&#xff0c;网络安全问题也日益凸显&#xff0c;成为了一个不可忽视的全球性挑战。认识到网络安…

【devops】ttyd 一个web版本的shell工具 | web版本shell工具 | web shell

一、什么是 TTYD ttyd是在web端一个简单的服务器命令行工具 类似我们在云厂商上直接ssh链接我们的服务器输入指令一样 二、安装ttyd 1、macOS Install with Homebrew: brew install ttydInstall with MacPorts: sudo port install ttyd 2、linux Binary version (recommend…

基于AT89C51单片机的多功能自行车测速计程器(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的多功能自行车测速计程器的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 选题背景 原理图 PCB图 仿真图 代码 系统论文 资源下载 选题背景 美丽的夜晚&…

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能&#xff0c;从机器学习开始 目录&#xff1a; 1. 机器学习&#xff1a;一种实现人工智能的方法 2. 机器学习算法&#xff1a;是使计算机具有智能的关键 3. Anaconda&#xff1a;初学Python、入门机器学习的首选 4. 总结 转载链接&#xff1a; 文章-阿里云开发者社…

基于嵌入式Linux的高性能车载娱乐系统设计与实现 —— 融合Qt、FFmpeg和CAN总线技术

随着汽车智能化的发展&#xff0c;车载娱乐系统已成为现代汽车的标配。本文介绍了一个基于Linux的车载娱乐系统的设计与实现过程。该系统集成了音视频娱乐、导航、车辆信息显示等功能&#xff0c;旨在提供安全、便捷、丰富的驾驶体验。 1. 项目概述 随着汽车智能化的发展&…

十五、【机器学习】【监督学习】- 神经网络回归

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…

水利行业的智慧革命:深度剖析智慧水利解决方案,看其如何以科技力量提升水资源管理效率,保障水生态安全

目录 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心要素 1. 感知层&#xff1a;全面监测&#xff0c;精准感知 2. 网络层&#xff1a;互联互通&#xff0c;信息共享 3. 平台层&#xff1a;数据分析&#xff0c;智能决策 4. 应用层&#xff1a;精准施策&#xff0…

创建通用JS公共模块并发布至npm

title: 创建通用JS公共模块并发布至npm tags: UMD rollup verdaccio npm categories: 模块化 概要内容 创建&#xff1a;JS公共模块 打包&#xff1a;使用rollup 打包公共模块 发布&#xff1a;js公共模块至verdaccio平台 发布&#xff1a;js公共模块至npm平台 如何创建JS公共模…

GEO数据挖掘从数据下载处理质控到差异分析全流程分析步骤指南

0. 综合的教学视频介绍 GEO数据库挖掘分析作图全流程每晚11点在线教学直播录屏回放视频&#xff1a; https://www.bilibili.com/video/BV1rm42157CT/ GEO数据从下载到各种挖掘分析全流程详解&#xff1a; https://www.bilibili.com/video/BV1nm42157ii/ 一篇今年近期发表的转…