Nuxt: Generate不为静态目标中的每个路由创建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时，这只会在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会自动搜索所有路由并生成它们。

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

Answer 1

如果您需要生成所有页面

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

Nuxt docs给出了如何实现这一目标的一些示例：

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
  }
}

之后，您应该确保将项目部署到的you服务器重定向到您的404.html。有些服务器自动完成此操作，但另一些服务器则不这样做。

在我的例子中(apache)，为了实现重定向，我必须在我的dist/.htaccess文件中添加以下行

ErrorDocument 404 /404.html

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

Answer 2

现在看来起作用了。以下几点似乎有效：

nuxt.config.js中

1. 添加了ssr:true

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

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

然后,

npm run build

npm run generate，

1. 紧随其后

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

要确认运行，npm run start，

Answer 3

来自文档(https://content.nuxtjs.org/advanced#static-site-generation)：

自Nuxt 2.14+以来，nuxt有一个集成的爬虫特性，它将爬行所有链接，并根据这些链接生成路由。

因此Nuxt将生成在您的站点中有一个链接的页面。

如果您想为所有的减价文件创建一个页面，可以在您的配置中使用以下内容：

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)
  }
},