Firebase 上的 Nuxt 动态路由答案

【问题标题】：Nuxt Dynamic Routing on FirebaseFirebase 上的 Nuxt 动态路由
【发布时间】：2019-12-21 09:59:03
【问题描述】：

我的 Nuxt.js 应用有这样的结构：

/pages/index.vue
/pages/_slug/index.vue

当用户获得/{any_page}时，会使用路径构建页面内容：

/pages/_slug/index.vue

<template>
  <div>
    {{slug}}
  </div>
</template>

<script>
import fetch from 'isomorphic-fetch';
export default {
  async asyncData({ params }) {
    return { slug: params.slug } 
  }
}
</script>

这在通过yarn dev 直接运行 Nuxt 应用程序时非常有效。

当我尝试使用 firebase 函数运行它时：

$ firebase serve --only functions,hosting

静态路由完美运行，但动态路由总是呈现默认的/ 页面，而不是执行动态页面。我该如何解决？

【问题讨论】：

您是否尝试将 Nuxt 项目作为静态内容部署到 Firebase 托管？

标签： javascript firebase google-cloud-functions nuxt.js

【解决方案1】：

如果使用nuxt generate，那么下面的解释应该有效。如果使用nuxt build，请查看this repo，它是我为nuxt + firebase 作为ssr 编写的模板。

Generate 表示它会跳过动态路由，除非您明确指定它们，因此会出现 404 错误。在您的 Nuxt 配置文件中，您要指定这些路由。这是生成期间从数据库中获取的示例。请注意，在下面的示例中，文档 ID 是页面的 slug。

nuxt.config.js

generate: {
    async routes() {
      const { db } = require('./services/fireInit');
      const qs = await db.collection('recipes').get();
      return qs.docs.map(x => `/recipes/${x.id}`);
    }
  },

这种方法的缺点是，当您通过 CMS 添加新项目时，如果您希望能够在没有 404 的情况下使用这些新链接，则每次都需要重新构建/部署您的网站。没有重新部署的 CMS 确实有效，如果您“有机地”导航到新内容...404 仅在页面刷新或从超链接直接跳转到页面时发生。

【讨论】：