文章目录
- 一、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
的热更新…