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

分享于2022年07月17日 nuxt.js vue.js 问答
【问题标题】:Nuxt:生成不会为静态目标中的每个路由创建 html(Nuxt: Generate does not create html for every route in static target)
【发布时间】: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
  ...

以下是我的观察:

  1. 如果我在 nuxt.config.js 中添加 s-s-r:true s-s-r:false 似乎对 dist 目录输出没有影响。
  2. 如果我将路由添加到生成设置,它会根据需要生成输出
  generate: {
    ...
    routes: ['blogs/blog1']
  }

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

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


【解决方案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", ...)