如何将SvelteKit与Node.js、Express结合实现前后端平滑集成

一、解决路由冲突的两种实现方案 #

方案1：Express作为SvelteKit的自定义服务器（同实例部署） #

这种方式适合要复用现有Express逻辑，且不想部署两个服务的场景，完全不会出现路由冲突：

• 第一步：安装@sveltejs/adapter-node，在svelte.config.js中配置使用该适配器，执行npm run build后会生成build目录，其中包含SvelteKit的服务处理中间件。
• 第二步：调整Express启动代码，先注册所有Express自定义路由，最后再注册SvelteKit的中间件，Express会优先匹配先注册的路由，未匹配到的请求才会交给SvelteKit处理前端路由。
  示例代码：

import express from 'express';
import { handler } from './build/handler.js'; // SvelteKit构建后生成的中间件

const app = express();
const PORT = 3000;

// 所有Express自定义路由优先注册
app.use(express.json());
app.get('/api/user', (req, res) => {
  res.json({ name: 'test', id: 1 });
});
app.post('/api/calculate', (req, res) => {
  // 原有算法逻辑直接在这里复用
  const result = req.body.a + req.body.b;
  res.json({ result });
});

// 最后注册SvelteKit处理逻辑，兜底所有未匹配的请求
app.use(handler);

app.listen(PORT, () => {
  console.log(`服务已启动，端口${PORT}`);
});

方案2：Express作为独立API服务（分离部署） #

如果两个服务分开部署，可通过SvelteKit的API路由做请求转发，不会出现跨域也不会和前端路由冲突：

• 在SvelteKit中创建通配API路由src/routes/api/[...path]/+server.js，统一转发所有/api/开头的请求到Express服务地址，前端所有请求直接发往当前域名的/api/路径即可，无需感知Express服务的实际地址。
  示例代码：

// src/routes/api/[...path]/+server.js
const EXPRESS_BASE = 'http://localhost:3001/api'; // 你的Express服务地址

export async function GET({ params, request }) {
  return forwardRequest(params.path, request);
}
export async function POST({ params, request }) {
  return forwardRequest(params.path, request);
}
// 按需补充PUT、DELETE等方法的处理

async function forwardRequest(path, req) {
  const res = await fetch(`${EXPRESS_BASE}/${path}`, {
    method: req.method,
    headers: req.headers,
    body: req.body
  });
  return new Response(res.body, {
    status: res.status,
    headers: res.headers
  });
}

二、后端数据与逻辑传递到客户端的方式 #

1. 初始页面数据：使用服务端加载函数 #

如果是页面初始化需要的数据/计算结果，直接在+page.server.js/+layout.server.js的load函数中处理：

• 可以直接导入原有Express的逻辑模块复用，无需重复编写代码
• 也可以直接调用Express接口获取数据，返回的结果会自动传递给对应的页面组件，客户端无需额外发请求
  示例代码：

// src/routes/dashboard/+page.server.js
// 直接导入原有Express中的算法模块
import { getStatistics } from '../../../express-logic/statistics.js';

export async function load() {
  // 直接调用后端逻辑
  const stats = getStatistics();
  // 也可以调用Express接口拿数据
  // const stats = await fetch('http://localhost:3001/api/statistics').then(r => r.json())
  return { stats };
}

对应的页面组件中直接通过export let data就能拿到返回的stats数据。

2. 动态交互数据：前端直接调用接口 #

用户交互时需要的动态数据，前端直接发请求到/api/开头的路径即可，不管是同实例部署还是分离部署，都能正常拿到Express返回的结果，直接在组件中渲染就行。

三、参考学习资源 #

你可以在SvelteKit官方文档中直接查找对应章节：

• 自定义服务器相关：查看Adapter Node章节的Custom server部分
• 加载函数相关：查看Load functions章节下的Server load部分
• API路由相关：查看Routing章节下的API routes部分

内容的提问来源于stack exchange，提问作者Odraccir