使用Vite构建Svelte多页面网站遇路由异常求助

核心排查与解决步骤 #

1. 确认页面结构与index.html正确性 #

每个页面必须是独立目录，且目录内的index.html要单独引入对应页面的Svelte组件，不能复用首页的入口脚本。

示例正确结构：

├── src/
│   ├── pages/
│   │   ├── home/
│   │   │   ├── index.html
│   │   │   └── App.svelte
│   │   └── about/
│   │       ├── index.html
│   │       └── App.svelte

about/index.html关键代码（需与首页区分）：

<script type="module" src="./App.svelte"></script>

2. 手动配置Vite多页面入口 #

默认自动扫描可能失效，需在vite.config.js中显式指定多页面入口：

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

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

3. 验证访问路径 #

开发环境先尝试访问完整路径localhost:5173/about/index.html，若能正常加载，说明是路径重写问题；若直接访问localhost:5173/about无效，可添加server.fs.strict: false到Vite配置中，或检查是否有前端路由拦截。

4. 清除缓存 #

强制刷新浏览器（Ctrl+F5），或清除浏览器缓存后重新访问，避免旧资源干扰。

5. 排查路由冲突 #

若项目引入了SvelteKit或自定义前端路由，需确保多页面未被路由规则拦截——多页面模式下，每个页面是独立入口，不应共用前端路由。

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