SvelteKit执行npm run build后index.html输出异常及fallback页面疑问

核心问题修复步骤 #

• 替换根路由组件：检查src/routes/+page.svelte，把默认的“Welcome to SvelteKit”内容替换成你自己的应用代码。这是最常见的原因——如果根页面没改，构建自然输出默认内容。
• 确认配置正确性：
  1. +layout.js中export const ssr = false;的设置没问题，这会让SvelteKit以纯客户端渲染模式运行，符合你的SPA需求。
  2. svelte.config.js中adapter-static的配置确保包含fallback: "index.html"，示例配置如下：

     import adapter from '@sveltejs/adapter-static';
     import { vitePreprocess } from '@sveltejs/kit/vite';
     
     /** @type {import('@sveltejs/kit').Config} */
     const config = {
       preprocess: vitePreprocess(),
       kit: {
         adapter: adapter({
           fallback: 'index.html'
         })
       }
     };
     
     export default config;
     

• 验证构建产物：执行npm run build后，打开build目录下的index.html，确认里面的内容是否包含你的应用代码。如果还是默认内容，清空build目录后重新构建试试。

Fallback页面的用途与自定义 #

用途 #

当你部署静态SPA时，直接访问前端子路由（比如/about）会触发服务器的404错误——因为服务器上没有对应的静态文件。设置fallback: "index.html"后，服务器会在遇到这类404请求时返回index.html，让前端路由系统接管，正确渲染对应的页面。这是实现SPA前端路由的关键配置。

自定义方法 #

Fallback页面本质就是你的SPA入口文件index.html，它是基于src/app.html模板生成的。如果要自定义入口的结构（比如添加全局meta标签、自定义脚本、修改页面标题），直接编辑src/app.html即可。例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的SPA应用</title>
	<!-- 自定义全局脚本 -->
	<script src="/custom-script.js"></script>
</head>
<body>
	<div id="svelte">%svelte.body%</div>
</body>
</html>

构建时，SvelteKit会将你的应用内容注入到%svelte.body%的位置，生成最终的index.html。

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