Nuxt：生成不会为静态目标中的每个路由创建 html答案

【问题标题】：Nuxt: Generate does not create html for every route in static targetNuxt：生成不会为静态目标中的每个路由创建 html
【发布时间】：2022-02-03 19:04:34
【问题描述】：

我希望为静态部署生成 html 文件。

package.json依赖如下

  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/markdownit": "^2.0.0",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },

内容目录为：

content
  blogs
     blog1
        cover.png  // image used as cover
        content.md // content of blog
     blog2
        cover.png
        content.md
     ...

页面目录是：

pages
   blogs
     _slug.vue
   index.vue

nuxt.config.js 是：

export default {
  target: 'static',
  generate: {
    fallback: '404.html',    
  },

当我运行npm run generate 时，这只会在dist 目录中创建一个index.html。我想要一个 dist 目录结构，例如：

dist
  _nuxt (dir)
  blogs
    blog1.html
  index.html
  ...

以下是我的观察：

如果我在 nuxt.config.js 中添加 ssr:true 或 ssr:false 似乎对 dist 目录输出没有影响。
如果我将路由添加到生成设置，它会根据需要生成输出

  generate: {
    ...
    routes: ['blogs/blog1']
  }

从文档中我认为 nuxt 会自动抓取所有路由并生成它们。

有没有办法得到我想要的？我可以通过一些循环逻辑生成路线吗？谢谢

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

如果需要生成所有页面

您必须说明 Nuxt 应该生成哪些路由。它不可能知道要生成的每条动态路由。它的爬虫没有你的后端/api数据，所以你必须像你一样手动提供它，或者通过编写一些循环逻辑来查询它。

Nuxt 文档给出了一些关于如何实现这一点的示例：

import axios from 'axios'

export default {
  generate: {
    routes() {
      return axios.get('https://my-api/blogs').then(res => {
        return res.data.map(blog => {
          return '/blogs/' + blog.id
        })
      })
    }
  }
}

参考：https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#function-which-returns-a-promise

如果不需要生成所有页面

当路由（如blogs/blog32）不存在时，您可以简单地使用 Nuxt 的后备页面。这样，它会尝试使用您的 _slug.vue 组件通过前端路由构建页面。

要实现此行为，请将fallback: true 添加到您的生成设置中

export default {
  generate: {
    fallback: '404.html' //or true
  }
}

之后，您应该确保部署项目的网络服务器重定向到您的 404.html。有些服务器会自动执行此操作，但有些则不会。

在我的情况下 (apache)，我必须在我的 dist/.htaccess 文件中添加以下行以进行重定向

ErrorDocument 404 /404.html

参考：https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#fallback

【讨论】：

谢谢@Jose。在我的用例中，由于所有博客都是内容文件夹的一部分，我会认为可以有一种方法来指定路由列表，就像我在我的网站的主页中检索它们一样......使用我的 index.vue 的 asyncData 中的 await $content("blogs", ...)

【解决方案2】：

现在看来可以了。以下似乎有效：

在 nuxt.config.js 中添加了ssr:true

//nuxt.config.js
export default {
  target: 'static',
  
  ssr: true,

  generate: {
    fallback: '404.html',    
  },
  ...

那么，

那么，npm run build
接着是npm run generate

现在我注意到所有博客页面都在 dist 目录中生成

要确认运行，npm run start

【讨论】：