Nuxt generate 不会用内容填充生成的 HTML 文件答案

【问题标题】：Nuxt generate doesn't fill generated HTML files with contentNuxt generate 不会用内容填充生成的 HTML 文件
【发布时间】：2020-05-30 03:44:15
【问题描述】：

我有一个 Nuxt 项目，它建立在外部无头 API (JSON) 之上，该 API 向应用程序提供内容。当我尝试运行 npm run generate 时，Nuxt 将创建一个 dist 文件夹，其中包含一个文件夹中的所有路由，并用 index.html 文件填充每个路由。但是，这些 HTML 文件未填充源自 API 的任何内容。预期的行为是我能够看到静态生成的内容。

有人能告诉我为什么预渲染我的应用程序不起作用吗？我怀疑我的 nuxt.config.js 有问题：

generate: {
    routes() {
      // Routes from headless CMS
      const pages = axios.get(`${api}/routes.json`).then((res) => {
        return res.data.data.map((item) => {
          return item.route
        })
      })

      // External API with vacancies
      const vacancies = axios
        .get('https://api.external.website')
        .then((res) => {
          return res.data.jobs.map((item) => {
            return '/careers/vacancies/' + item.id
          })
        })

      // Combine both routes
      return Promise.all([pages, vacancies]).then((values) => {
        return [...values[0], ...values[1]]
      })
    }
  }

【问题讨论】：

标签： vue.js axios nuxt.js server-side-rendering

【解决方案1】：

我不确定它为什么会这样（也想了解原因），但这是我找到的一个示例解决方法 online

<template>
  <div>
    <nuxt-link to="/jokes">Back To Jokes</nuxt-link>
    <hr />
    <small>Joke ID: {{ $route.params.id }}</small>
  </div>
</template>

joke ID 是从外部 API 获得的，但由于 nuxt generate 已为所有动态文章页面创建路由并将其 ID 设置为参数，因此我可以轻松地从路由中提取 id。

【讨论】：