在 vite+vue3+electron 中使用 express

文章目录

      • [一、Vite + Vue3 + Electron 项目的搭建](#一、Vite + Vue3 + Electron 项目的搭建)
      • [二、搭建 express 环境](#二、搭建 express 环境)
        • [1、安装 express 框架所需依赖](#1、安装 express 框架所需依赖)
        • [2、创建 express 项目](#2、创建 express 项目)
        • 3、配置路由
        • [4、启动 express 服务](#4、启动 express 服务)
        • [5、启动 electron 并获取数据](#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 文件内容如下:

js 复制代码
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 文件,文件内容如下:

js 复制代码
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 启动服务相关函数:

js 复制代码
// 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"));

启动服务:

js 复制代码
// 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 文件内容如下:

js 复制代码
<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 参数:

json 复制代码
"compilerOptions": { ... },
"include": ["server/**/*.ts","src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "electron"],

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

json 复制代码
"files": [
    "dist",
    "dist-electron",
    "server/**/*"
]

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

相关推荐
开心工作室_kaic9 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿28 分钟前
webWorker基本用法
前端·javascript·vue.js
caridle1 小时前
教程:使用 InterBase Express 访问数据库(五):TIBTransaction
java·数据库·express
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
@小博的博客1 小时前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
南宫生2 小时前
贪心算法习题其四【力扣】【算法学习day.21】
学习·算法·leetcode·链表·贪心算法
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
懒惰才能让科技进步3 小时前
从零学习大模型(十二)-----基于梯度的重要性剪枝(Gradient-based Pruning)
人工智能·深度学习·学习·算法·chatgpt·transformer·剪枝
love_and_hope3 小时前
Pytorch学习--神经网络--搭建小实战(手撕CIFAR 10 model structure)和 Sequential 的使用
人工智能·pytorch·python·深度学习·学习