时间戳

首页 > 解决方案 > Nuxt.js：管理静态生成网站的 CMS 集合

vue.js - Nuxt.js：管理静态生成网站的 CMS 集合

问题描述

在 上nuxt generate，我们需要从 CMS 中获取所有集合。由于我们的网站是完全静态的，因此只获取每个集合 1 次就足够了，然后将它们提供给所有路由。

我们遇到了实现这一点的问题，而没有将我们所有的网站内容暴露给每一条路线。

我们可以使用 vuex 来存储所有内容。但是，我们不希望客户可以使用包含我们所有网站内容的巨型商店对象。只有在构建过程中，服务器才能访问它并将所需的内容传递给每个路由，例如。via asyncData() （请记住，我们有一个静态生成的网站，因此asyncData()永远不会从客户端调用）。

示例：我们需要blog集合 on /blog, 但也 on /blog/:slug, and on /press。目前我们单独获取它们：

// /pages/blog/index.vue
export default {
  asyncData() {
    return fetchArticles();  
  }
}

// /pages/blog/_slug.vue
export default {
  asyncData(context) {
    // made available in nuxt.config.js
    return context.payload;
  }
}

// nuxt.config.js
export default {
  generate: {
    // generate dynamic routes
    routes: async function() {
      const collection = await fetchArticles();
      const result = collection.map(item => {
        return {
          route: `/blog/${item.slug}`,
          // save in payload, to make available in context
          payload: item
        };
      });
      return result;
    }
  }
}

问题：我们两次获取同一个集合。我们想获取它一次，然后使其可用于所有路由。

预期结果：能够

  1. 仅获取每个集合 1 次

  2. 仅将所有集合存储在服务器端，通过asyncData()

  3. 在客户端，无法访问该“服务器端存储”

实际结果：

标签： vue.jscontent-management-systemvuexnuxt.js

解决方案

只需使用与单个博客文章相同的方式填充 /blog/index.vue 即可。您只需要确保从静态路由列表中排除 /blog 路径。你可以试试这个https://github.com/nuxt/nuxt.js/issues/2719#issuecomment-508583281。或 makenuxt build && nuxt generate --no-build命令（这样所有静态路由都将被排除，您需要手动指定它们）。

PS：

因为 context.payload 仅适用于动态路由

我刚刚尝试了上面的方法，它奏效了。

推荐阅读