Nuxt v2.15路由尾斜杠移除问题：硬刷新后仍存在的解决方案

核心问题根源 #

硬刷新时请求直接抵达服务器，若服务器默认给目录类请求自动添加尾斜杠，会和Nuxt配置的trailingSlash: false冲突，引发重定向循环或页面加载失败。必须同时从服务器配置和Nuxt应用层双向处理。

1. 服务器层面拦截（关键） #

不同服务器配置规则如下：

• Nginx：在站点配置中添加重写规则，强制移除尾斜杠

  # 排除根目录（避免把/重定向到空路径）
  rewrite ^/(.*)/$ /$1 permanent;
  

  确保Nginx不会自动为目录请求添加尾斜杠，同时将所有带尾斜杠的请求永久重定向到无斜杠版本。

• Apache：在项目根目录的.htaccess中添加规则

  RewriteEngine On
  # 仅针对非真实目录的请求移除尾斜杠
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)/$ /$1 [L,R=301]
  

2. 完善Nuxt中间件逻辑 #

修改或新增路由中间件，覆盖客户端和服务端的路由处理：

1. 创建middleware/redirectTrailingSlash.js文件：

   export default function ({ route, redirect }) {
     // 跳过根目录，处理其他带尾斜杠的路由
     if (route.path !== '/' && route.path.endsWith('/')) {
       // 保留hash锚点，避免重定向丢失页面定位
       const newPath = route.path.slice(0, -1) + route.hash
       // 301永久重定向，利于SEO优化
       redirect(301, newPath)
     }
   }
   

2. 在nuxt.config.js中全局注册中间件：

   export default {
     router: {
       trailingSlash: false,
       middleware: ['redirectTrailingSlash']
     }
   }
   

3. 静态生成项目额外配置 #

如果使用nuxt generate生成静态站点，需同步配置生成规则：

export default {
  generate: {
    trailingSlash: false
  }
}

确保生成的静态HTML文件路径不带尾斜杠，避免服务器解析时自动补全。

4. 清除浏览器缓存 #

硬刷新后问题仍存在时，大概率是浏览器缓存了旧的重定向规则，手动清除浏览器缓存或使用隐私模式测试即可。

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