SvelteKit部署或预览时页面404问题求助

核心原因 #

你的问题出在a标签的href路径错误，以及对SvelteKit路由规则不熟悉：

• 开发环境下src/routes是源码目录，Dev服务器能识别这个路径，但生产打包后src目录不会被包含，所以部署后路径失效。
• SvelteKit的路由是基于routes文件夹的结构自动生成的，不需要手动写src/routes前缀。

解决方案 #

1. 修正a标签的href路径 #

假设你的Uru-Page页面文件是src/routes/Uru-Page/+page.svelte，直接使用路由的绝对路径或相对路径即可：

<div class="title">
    <h1 class=bigTitle>Best Jpop Groups in the Business</h1>
    <p>and you can't tell me otherwise</p>
</div>
<ol class="ranking-row">
    <div>
        <!-- 使用绝对路径 -->
        <a href="/Uru-Page">
            <li id="Uru">Uru</li>
            <img alt="The singer Uru" src={Uru}/>
        </a>
    </div>
</ol>

2. 推荐使用SvelteKit官方导航组件 #

为了获得无刷新的客户端导航体验，建议使用SvelteKit提供的Link组件：

<script>
    import { Link } from '$app/navigation';
    import Uru from '$lib/assets/uru-image.jpg'; // 假设图片存放在lib/assets目录下
</script>

<div class="title">
    <h1 class=bigTitle>Best Jpop Groups in the Business</h1>
    <p>and you can't tell me otherwise</p>
</div>
<ol class="ranking-row">
    <div>
        <Link to="/Uru-Page">
            <li id="Uru">Uru</li>
            <img alt="The singer Uru" src={Uru}/>
        </Link>
    </div>
</ol>

3. 正确配置Vercel适配器 #

如果部署到Vercel，按以下步骤配置：

1. 安装依赖：

npm install @sveltejs/adapter-vercel --save-dev

2. 修改svelte.config.js：

import vercel from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: vercel(),
        // 仅当项目部署在域名子路径（如https://xxx.com/myapp）时，才需要设置paths.base
        // paths: {
        //     base: '/myapp',
        // }
    }
};

export default config;

注意：非子路径部署时不要添加paths.base，否则会导致所有路径前缀错误，引发404。

4. 确认routes文件夹结构正确性 #

页面文件必须遵循SvelteKit路由规范：每个页面对应routes下的文件夹，且文件夹内必须包含+page.svelte文件，示例结构：

src/
└── routes/
    ├── +page.svelte       # 首页
    └── Uru-Page/
        └── +page.svelte   # Uru页面

这样SvelteKit才会自动生成/Uru-Page的有效路由。

验证方法 #

修改完成后，执行npm run build，再执行npm run preview测试链接跳转，确认正常后再部署。

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