Nuxt 2.15.8动态路由刷新后404错误的解决咨询

问题描述 #

我使用Nuxt 2.15.8版本，刷新localhost:3000/products/{product.id}这类动态路由页面时，浏览器返回404。其中product.id数据来自Firebase数据库。尝试过执行npm run generate，也使用了如下dynamic-routes.js插件，但问题仍未解决：

import axios from 'axios'

export default {
    generate: {
        routes() {
            return axios
                .get(
                    'https://my-api/products.json'
                )
                .then((res) => {
                    const data = Object.keys(res.data)
                    return data.map((value) => {
                        return '/products/' + res.data[value].urlsId
                    })
                })
        }
    }
}

解决建议 #

• 检查动态路由文件命名
  确保你的动态路由文件命名为_id.vue（或对应参数名的_xxx.vue），放在pages/products/目录下。Nuxt 2的动态路由必须以下划线开头命名文件，才能正确匹配/products/:id这类路径。

• 修正generate配置的放置位置
  你写的dynamic-routes.js逻辑不能作为插件使用，Nuxt 2中generate配置需要直接放在nuxt.config.js里。调整后的代码如下：

  export default {
    generate: {
      async routes() {
        const axios = require('axios')
        const res = await axios.get('https://my-api/products.json')
        // 确保urlsId是Firebase返回数据中正确的字段名
        return Object.values(res.data).map(product => `/products/${product.urlsId}`)
      }
    }
  }
  

  用async/await写法更清晰，同时检查urlsId字段是否拼写正确，避免因字段名错误导致路由生成失败。

• 核对Firebase数据结构
  Firebase返回的products.json是对象格式（key为文档ID，value为产品数据），如果你的路由参数实际需要用Firebase文档ID，应该直接使用Object.keys返回的key值：

  async routes() {
    const axios = require('axios')
    const res = await axios.get('https://my-api/products.json')
    return Object.keys(res.data).map(docId => `/products/${docId}`)
  }
  

• 开启fallback模式适配动态数据
  如果产品数据会动态更新，无法提前全部预渲染，可在nuxt.config.js中开启fallback: true：

  export default {
    generate: {
      fallback: true,
      // 其他路由配置...
    }
  }
  

  执行npm run generate后会生成dist/404.html，部署时需配置服务器将404请求指向该文件（比如Nginx添加try_files $uri $uri/ /404.html;），这样未预渲染的路由会由Nuxt客户端接管渲染。

• 开发环境排查
  开发环境（npm run dev）刷新出现404，先确认axios能正常获取Firebase数据，可在控制台打印返回结果检查。另外重启开发服务器，避免缓存导致的路由不生效问题。

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