使用svelte-navigator的Svelte应用刷新路由出现localhost 404错误

问题原因 #

单页应用（SPA）的前端路由通过浏览器端JS处理路径切换，常规跳转时不会向服务器发起新请求。但刷新页面时，浏览器会直接向服务器请求对应路径（比如/myhome）的资源，而服务器上不存在该路径的静态文件，因此返回404错误。

解决方案 #

1. 本地开发环境配置 #

Vite构建工具

修改vite.config.js，添加historyApiFallback配置，让所有路由请求都返回入口文件index.html：

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

export default defineConfig({
  plugins: [svelte()],
  server: {
    historyApiFallback: true
  }
});

Rollup构建工具

使用rollup-plugin-serve并配置fallback：

import serve from 'rollup-plugin-serve';

export default {
  // 其他Rollup配置项
  plugins: [
    serve({
      contentBase: 'public',
      historyApiFallback: true
    })
  ]
};

2. 生产环境部署配置 #

根据你使用的服务器，配置路由 fallback 到index.html：

• Nginx：在站点配置中添加

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：在项目根目录创建.htaccess文件，写入

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• Netlify：创建_redirects文件，内容为

/*    /index.html   200

• Vercel：创建vercel.json文件，内容为

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

关键说明 #

svelte-navigator仅负责前端路由逻辑，无法处理服务器端的路径请求。必须通过服务器或开发服务器的配置，确保所有非静态资源的请求都返回应用入口文件index.html，让前端路由能正常接管页面渲染。

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