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

Question

我希望生成用于静态部署的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

时，只会在

index.html

目录中创建一个

dist

。我想要一个 dist 目录结构，例如：

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

以下是我的观察：

1. 如果我在

   nuxt.config.js

   中添加

   ssr:true

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

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

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

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

Answer 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

Answer 2

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

1. 在 nuxt.config.js 中添加了

   ssr:true

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

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

那么，

2. 那么，

   npm run build

3. 其次是，

   npm run generate

现在我注意到所有博客页面都在

dist

目录中生成

4. 要确认运行，

   npm run start

Answer 3

来自文档（https://content.nuxtjs.org/v1/getting-started/advanced/#static-site- Generation）：

从 Nuxt 2.14+ 开始，nuxtgenerate 集成了爬虫功能，它将爬取您的所有链接并根据这些链接生成您的路线。

Nuxt 将生成在您的网站内包含链接的页面。

如果您想为所有 Markdown 文件创建页面，您可以在配置中使用它：

generate: {
  async routes () {
    const { $content } = require('@nuxt/content')
    const files = await $content({ deep: true })
      .where({ extension: { $eq: '.md' } })
      .only(['path']).fetch()

    return files.map(file => file.path === '/index' ? '/' : file.path)
  }
},

Answer 4

Nuxt 3 SSR 爬虫需要像人在页面之间冲浪一样找到路线。因此，手动创建一个

/sitemap

（或任何名称），循环遍历所有路线，例如：

  <ul>
    <li v-for="(post, key) in posts">
      <NuxtLink :to="post.the_url">
        <span v-html="post.post_title"></span>
      </NuxtLink>
    </li>
  </ul>

但是！确保

post.the_url

是 相对 URL，而不是绝对 URL。爬虫似乎不爬行绝对URL。重申一下，确保站点地图的输出 HTML 如下所示：

  <ul>
    <li>
      <a href="/my-first-post-yay">
        <span>My First Posts Yay!</span>
      </a>
    </li>
...
  </ul>