Nuxt 3：页面与同名public目录下开发生产环境尾斜杠行为不一致

核心问题原因 #

当前开发环境关闭SSR（ssr: false）、生产环境开启SSR，加上public/foo文件夹与pages/foo.vue路由同名，导致两端路由处理逻辑产生差异：

• 开发环境（静态模式）下，服务器会把/foo识别为对public/foo目录的访问，自动301重定向到带尾斜杠的/foo/；
• 生产环境（SSR模式）下，Nuxt优先匹配pages/foo.vue路由，不会触发目录重定向。

具体解决方案 #

1. 消除路由与静态目录的同名冲突 #

将public目录下的foo文件夹重命名（比如改为foo-assets），避免与pages/foo.vue的路由路径/foo产生歧义。这是最直接的解决方式，能从根源上消除环境差异的触发条件。

2. 统一尾斜杠规则配置 #

在nuxt.config.ts中添加trailingSlash配置，强制所有环境遵循一致的尾斜杠规则：

export default defineNuxtConfig({
  ssr: process.env.NODE_ENV !== 'development',
  trailingSlash: true, // 可选值：true（强制带尾斜杠）/ false（强制不带尾斜杠）/ undefined（默认）
})

该配置会让Nuxt在生成路由或处理请求时，统一添加或移除尾斜杠，覆盖服务器的默认行为。

3. 统一SSR模式（若Vuetify组件允许） #

如果可以调整Vuetify组件适配开发环境的SSR模式，将ssr配置改为全环境开启：

export default defineNuxtConfig({
  ssr: true,
})

这样开发与生产环境使用相同的路由处理逻辑，尾斜杠行为会自动统一。

4. 开发环境中间件强制重定向 #

如果上述方法无法实施，可通过自定义服务器中间件，在开发环境强制统一重定向规则：
在server/middleware/trailingSlash.ts中添加以下代码：

export default defineEventHandler((event) => {
  const requestPath = event.node.req.url?.split('?')[0] || '';
  // 示例：强制所有路由不带尾斜杠
  if (requestPath.endsWith('/') && requestPath !== '/') {
    const redirectPath = requestPath.slice(0, -1);
    return sendRedirect(event, redirectPath, 301);
  }
  // 若要强制带尾斜杠，可改为：
  // if (!requestPath.endsWith('/')) {
  //   return sendRedirect(event, `${requestPath}/`, 301);
  // }
})

该中间件会在开发环境拦截请求，统一调整尾斜杠后重定向，对齐生产环境行为。

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