单页同义词网站URL刷新404：如何配置服务器实现本地同款效果？

我有一个纯JS、HTML、CSS开发的同义词查询网站，部署在https://michalzagojski.pl。搜索词汇后，URL会更新为michalzagojski.pl/synonim/[词汇]，这个前端路由过程无需刷新页面，运行正常。但点击浏览器刷新按钮，或者直接把该链接粘贴到地址栏访问时，会返回404错误：GET https://michalzagojski.pl/synonim/[SOME_WORD] 404。

本地用Gulp+BrowserSync开发时没有这个问题，Gulp配置里用了historyApiFallback中间件：

browserSync.init({
    server: {
        baseDir: './dist',
        middleware: [historyApiFallback()]
    }
});

本地刷新或直接访问这类链接都能正常加载。现在需要在服务器端做配置，实现和本地一样的效果，同时保留/synonim/[词汇]的URL格式。

核心思路是让服务器把所有指向/synonim/xxx的请求，都转发到网站根目录的index.html（你的单页应用入口文件），由前端路由处理具体的词汇逻辑——这和本地historyApiFallback的作用完全一致。

以下是几种常见服务器/托管平台的配置方法：

1. Nginx服务器 #

修改Nginx配置文件（通常路径为/etc/nginx/sites-available/你的域名.conf），在server块中添加路由规则：

server {
    # 保留原有配置（监听端口、域名、根目录等）
    root /path/to/your/dist/folder; # 对应本地的./dist目录
    index index.html;

    # 处理/synonim/开头的所有请求
    location /synonim/ {
        try_files $uri $uri/ /index.html;
    }
}

修改完成后重启Nginx生效：sudo systemctl restart nginx

2. Apache服务器 #

先确保mod_rewrite模块已启用，然后在网站根目录（对应本地./dist）创建.htaccess文件，写入规则：

RewriteEngine On
RewriteBase /
# 匹配所有/synonim/开头的路径，转发到index.html
RewriteRule ^synonim/.*$ /index.html [L]

3. 静态托管平台（Netlify/Vercel/GitHub Pages） #

• Netlify：在网站根目录创建_redirects文件，写入：

  /synonim/*    /index.html   200
  

• Vercel：在vercel.json文件中配置重写规则：

  {
    "rewrites": [
      { "source": "/synonim/:path*", "destination": "/index.html" }
    ]
  }
  

• GitHub Pages：由于平台本身不支持自定义路由重写，可通过404.html做临时兼容：将404.html内容设置为和index.html一致，或添加一段JS代码在404页面加载时跳转：

  if (window.location.pathname.startsWith('/synonim/')) {
    window.location.replace('/index.html' + window.location.search + window.location.hash);
  }
  

关于根目录的定义 #

你可以在服务器配置中指定网站根目录为本地./dist文件夹对应的服务器路径（比如Nginx里的root /path/to/your/dist/folder），所有静态资源（HTML/CSS/JS）都放在该目录下，作用和本地BrowserSync的baseDir完全一致。

内容的提问来源于stack exchange，提问作者Michał_Zagojski