SvelteKit/Node仅首页加载JS及资源问题排查求助

• 部署在Node.js服务器的SvelteKit站点，首页可正常加载所有资源，页面间客户端跳转时资源能正常保留
• 直接访问非首页URL或刷新非首页页面时，页面缺少必要的modulepreload链接，相关JS资源未加载，onMount函数不执行，导致头部渲染异常
• 已尝试更新所有Node模块（当前Node版本20.12）、回滚Svelte版本，问题仍存在

异常页面头部代码 #

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.png" />
    <script src="https://kit.fontawesome.com/89d8f38984.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link href="./_app/immutable/assets/0.CgVQ2S1-.css" rel="stylesheet"><title>Outreach</title><!-- HEAD_svelte-12kwvgb_START --><meta name="description" content="The outreach events of the UA Nasa Robotics Mining Team. Helping and teaching out in the community of Akron"><meta name="keywords" content="NASA, Robotic Mining Competition, Lunabotics, Artemis, Moon to Mars, outreach, community, events, help, teach, volunteer"><meta name="author" content="uA NASA Robotic Mining Competition Team"><!-- HEAD_svelte-12kwvgb_END -->
</head>

正常首页头部代码 #

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.png" />
    <script src="https://kit.fontawesome.com/89d8f38984.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link href="./_app/immutable/assets/0.CgVQ2S1-.css" rel="stylesheet">
    <link href="./_app/immutable/assets/2.I7UnUOAp.css" rel="stylesheet">
    <link rel="modulepreload" href="./_app/immutable/entry/start.C5jAzutL.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/entry.CM5QWRvp.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/scheduler.DZldofIX.js">
    <link rel="modulepreload" href="./_app/immutable/entry/app.KINXI3QZ.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/index.BGW6N4qv.js">
    <link rel="modulepreload" href="./_app/immutable/nodes/0.Bdfgo2Gn.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/each.D6YF6ztN.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/stores.BXLrAGVc.js">
    <link rel="modulepreload" href="./_app/immutable/chunks/Logo.CbnnVDWC.js">
    <link rel="modulepreload" href="./_app/immutable/nodes/2.D7JicPhI.js"><title>Home</title><!-- HEAD_svelte-ck10j9_START --><meta name="description" content="UA Nasa Robotic Mining Competition Team, University of Akron Design Team"><meta name="keywords" content="NASA, Robotic Mining Competition, Lunabotics, Artemis, Moon to Mars, design team"><meta name="author" content="UA NASA Robotic Mining Competition Team"><!-- HEAD_svelte-ck10j9_END -->
</head>

1. 服务器路由配置错误 #

SvelteKit需要服务器将所有非静态资源的请求转发到SvelteKit的入口处理逻辑，不能仅用静态文件服务器托管build目录。

• 如果使用@sveltejs/adapter-node，确保启动命令为：

  node build
  

• 如果用自定义Express服务器，配置示例：

  import express from 'express';
  import { handler } from './build/handler.js';
  
  const app = express();
  // 托管静态资源
  app.use(express.static('build'));
  // 所有其他请求交给SvelteKit处理
  app.use(handler);
  
  app.listen(3000);
  

2. 站点base路径配置错误 #

如果站点部署在子路径下（如https://example.com/team/），需在svelte.config.js中设置正确的base：

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    base: '/team' // 替换为实际子路径
  }
};

export default config;

错误的base会导致资源路径解析失败，预加载链接无法加载。

3. 页面路由或load函数异常 #

• 确认非首页页面的路由文件存在（如src/routes/outreach/+page.svelte）
• 临时移除页面的load函数，测试是否能正常加载资源，排查是否是数据加载逻辑导致服务器渲染不完整

4. 构建产物异常 #

重新执行构建命令，检查构建过程是否有警告或错误：

npm run build

确认build/_app/immutable目录下存在对应的JS、CSS文件，确保构建产物完整。

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