SvelteKit部署至AWS S3后直接访问链接出现404问题求助

1. 修改SvelteKit配置文件 #

你的svelte.config.js需要给adapter-static添加fallback配置，让所有未匹配的路由都回退到index.html，由前端路由处理：

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({
            fallback: 'index.html' // 添加这一行配置
        })
    }
};

export default config;

修改后重新执行npm run build生成静态文件，再重新上传到S3存储桶。

2. 配置Amazon S3静态网站托管 #

登录S3控制台，找到目标存储桶：

• 进入属性标签，找到静态网站托管模块
• 在错误文档输入框中填写index.html，保存设置

这样当用户直接输入子路由地址时，S3找不到对应路径的文件会返回index.html，由SvelteKit的前端路由解析路径并渲染对应页面。

验证 #

重新上传构建后的静态文件到S3后，直接在浏览器地址栏输入子路由地址，即可正常加载对应页面。

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