SvelteKit与sveltejs/template的区别及路由不识别问题咨询

核心差异：两个模板的本质不同 #

• npm create svelte@latest 生成的是SvelteKit项目，这是Svelte官方的全栈框架，自带基于文件系统的路由机制（src/routes目录下的文件自动对应路由），所以你之前创建路由完全正常。
• npx degit sveltejs/template 是纯Svelte核心库的基础模板，它只包含最基础的Svelte编译环境，没有内置任何路由功能，自然无法自动识别你创建的路由文件。

解决方法：手动添加路由功能 #

如果你坚持要用sveltejs/template（比如为了适配全局CSS的教程），可以手动集成第三方路由库，这里以svelte-spa-router为例：

1. 安装路由库：

npm install svelte-spa-router

2. 配置路由与页面组件：
   • 新建src/routes目录，创建你的页面组件（比如Home.svelte、About.svelte）
   • 新建src/Router.svelte文件，编写路由规则：

<script>
  import { Router, Route } from 'svelte-spa-router';
  import Home from './routes/Home.svelte';
  import About from './routes/About.svelte';

  const routes = {
    '/': Home,
    '/about': About
  };
</script>

<Router {routes} />

3. 修改src/App.svelte，引入并启用路由：

<script>
  import Router from './Router.svelte';
</script>

<main>
  <Router />
</main>

4. （可选）添加导航链接：

<!-- 在App.svelte中添加导航 -->
<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
</nav>

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