如何强制Nuxt生成全小写的路由？

当执行yarn generate生成Nuxt静态项目时，混合大小写的路由可能出现部分生成小写文件夹、部分未生成的情况，导致直接访问未生成小写版本的路由时出现404。以下是两种可行的解决方法：

方法一：生成原始路由+小写别名路由 #

在nuxt.config.js中通过generate:routes钩子，为每个混合大小写的路由额外生成一个全小写的版本，确保静态文件同时包含两种路径的文件夹：

export default {
  generate: {
    async routes() {
      const originalRoutes = await this.nuxt.server.router.getRoutes()
      const processedRoutes = originalRoutes.flatMap(route => {
        // 跳过根路由和已全小写的路由
        if (route.path === '/' || route.path.toLowerCase() === route.path) {
          return [route.path]
        }
        // 同时返回原始路由和小写版本路由
        return [route.path, route.path.toLowerCase()]
      })
      // 去重后返回最终路由列表
      return [...new Set(processedRoutes)]
    }
  }
}

执行yarn generate后，每个混合大小写的路由都会生成对应原始路径和全小写路径的文件夹，直接访问两种路径都能正常加载页面。

方法二：强制所有路由转为小写 #

如果不需要保留原始大小写的路由，可以直接修改路由规则，将所有路由路径转为小写：

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.forEach(route => {
        // 转换当前路由路径为小写
        route.path = route.path.toLowerCase()
        // 递归处理子路由
        if (route.children) {
          route.children.forEach(child => {
            child.path = child.path.toLowerCase()
          })
        }
      })
    }
  },
  generate: {
    routes: async function() {
      const routes = await this.nuxt.server.router.getRoutes()
      return routes.map(route => route.path)
    }
  }
}

这种方式会让生成的静态文件夹全为小写，注意如果你的业务逻辑依赖原始路由的大小写（比如API请求参数与路由大小写绑定），需要同步调整对应逻辑。

补充说明 #

如果部署时使用静态服务器（如Nginx、Netlify），也可以通过服务器配置实现路径大小写不敏感，但优先在Nuxt生成阶段处理能减少对服务器配置的依赖，提升兼容性。

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