如何在Svelte（非Svelte Kit）+Vite项目中新增页面？

方案1：用路由做单页应用（SPA） #

这是最常用的方式，页面切换不用刷新，体验更流畅。

用svelte-routing库（适合基础Svelte项目） #

1. 先装依赖：

npm install svelte-routing

2. 改App.svelte，引入路由组件并配置规则：

<script>
  import { Router, Route, Link } from 'svelte-routing';
  import Home from './Home.svelte'; // 把原来App里的首页内容拆成这个组件
  import About from './About.svelte'; // 新建的关于页组件
</script>

<Router>
  <nav>
    <!-- 导航链接，点击不会刷新页面 -->
    <Link to="/">首页</Link>
    <Link to="/about">关于</Link>
  </nav>

  <!-- 路由匹配规则，路径对应组件 -->
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

3. 调整结构：把原来App.svelte里的首页内容移到新建的Home.svelte，然后编写About.svelte的内容。
4. main.js不用改，还是挂载App.svelte到#app元素即可。

用SvelteKit（官方推荐的全栈框架） #

如果项目还没基于SvelteKit，直接迁移过来更省心，它自带路由系统，适合复杂项目：

1. 初始化项目（新项目的话）：

npm create svelte@latest my-app
cd my-app
npm install

2. 路由靠文件系统自动识别：在src/routes目录下，新建+page.svelte就是一个页面：
   • src/routes/+page.svelte → 首页
   • src/routes/about/+page.svelte → 关于页
3. 导航用内置的<a href="/about">就行（自动处理无刷新跳转），或者用goto函数：

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

<button on:click={() => goto('/about')}>跳去关于页</button>

方案2：做多页应用（MPA） #

如果确实需要完全独立的HTML页面（比如特殊SEO需求），可以这么配置：

基于Vite的项目（当前Svelte默认模板） #

1. 根目录新建about.html，结构跟index.html类似，换个挂载元素和引入的js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关于我们</title>
</head>
<body>
  <div id="about"></div>
  <script type="module" src="/src/about.js"></script>
</body>
</html>

2. 新建src/about.js，挂载About.svelte到#about：

import About from './About.svelte';

new About({
  target: document.getElementById('about'),
});

3. 修改vite.config.js，配置多页入口：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        about: './about.html',
      },
    },
  },
});

4. 执行npm run build后，dist目录里会生成两个页面的打包文件，各自独立。

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