Svelte项目点击注册页返回404 Not Found错误求助

1. 检查路由配置与文件结构 #

如果用的是SvelteKit（主流Svelte路由方案），路由是基于src/routes目录自动生成的，必须保证注册页面的文件位置正确：

• SvelteKit 1.x+版本：注册页面需放在src/routes/signup/+page.svelte
• 旧版SvelteKit：直接放在src/routes/signup.svelte

如果用的是svelte-routing这类第三方路由库，要手动在路由配置中添加/signup规则：

// 示例路由配置文件
import { Router, Route } from 'svelte-routing';
import Signup from './signup.svelte';
import Login from './login.svelte';

<Router>
  <Route path="/login" component={Login} />
  <Route path="/signup" component={Signup} />
</Router>

2. 修正注册跳转链接的写法 #

别用普通<a>标签硬跳，要适配Svelte的路由机制：

• SvelteKit用内置跳转方式：

<script>
  import { goto } from '$app/navigation';
</script>

<!-- 方式1：用a标签（推荐，支持预加载） -->
<a href="/signup" rel="prefetch">去注册</a>

<!-- 方式2：用按钮触发goto函数 -->
<button on:click={() => goto('/signup')}>注册</button>

• 用svelte-routing的话，用组件式跳转：

<script>
  import { Link } from 'svelte-routing';
</script>

<Link to="/signup">注册</Link>

3. 修复资源加载失败问题 #

控制台的资源加载报错，大多是路径引用错误：

• 静态资源（图片、CSS）用SvelteKit的$lib别名或相对路径，别写死绝对路径：

<script>
  import avatar from '$lib/assets/avatar.png';
</script>

<img src={avatar} alt="用户头像" />

• 如果是部署后出现的问题，检查SvelteKit的adapter配置，比如adapter-static需要设置prerender: true或trailingSlash: 'always'

4. 重置开发环境排除缓存问题 #

缓存会导致路由不生效，按以下步骤操作：

• 停止当前开发服务器
• 删除项目根目录下的.svelte-kit和node_modules/.cache文件夹
• 重新启动服务器：npm run dev

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