Nuxt.js: Routing-Konfiguration kann nicht automatisch generiert werden

Question

Ich möchte statische Routen (/contact, /about,...) und dynamische Routen (/project /1<) generieren. /code>, /project/2, ...), sodass die Seite immer noch ordnungsgemäß funktioniert, wenn der Benutzer die Seite aktualisiert, während er auf eine dieser Routen zugreift.

Aber wenn ich npm run generic ausführe, erhalte ich nur die generierte Route „/“ in /dist Generierte Routen sind im Ordner nicht sichtbar.

Verwendete Nuxt.js-Version: 2.14.7

Ich habe beide Modi ausprobiert, universal und spa, keiner hat funktioniert.

In der Datei nuxt.config.js habe ich oben den folgenden Code hinzugefügt:

const axios = require('axios')

const DynamicRoutes = async () =>
  const Routen = Warten auf axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/um',
        '/Kontakt',
        '/portfolio'
      ]
    ))
  Rückwege
}

Dann in export default {}:

generate: {
  Routen: dynamische Routen
},

Answer 1

首先，您不需要在配置中添加mode: 'universal'，只需添加target: 'static'以简化配置。了解更多信息 - https://nuxtjs.org/docs/2.x/features/deployment-targets/。使用ssr: true，您将获得完全静态模式的网站，并且具有相关的钩子，如https://stackoverflow.com/a/65208463/8153537中所述。

接下来，您可以删除@nuxt/router模块。查看我的gist - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d。Nuxt会根据文件夹结构生成所有所需的路由，因此不需要额外的配置。

查看此gist以获取项目页面路由 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332。

Answer 2

router.mode='hash' 似乎与 generate.routes 配置不兼容。当 router.mode 设置为 hash 时，Nuxt 生成器会忽略 generate.routes，只创建一个用于 / 的路由，这可能是因为只期望在 hash 模式下存在首页（即 index.html 设置了一个路由，该路由处理应用程序的所有路由）。

这种哈希模式也与 router.js 中设置的模式 冲突，但如果你真的需要哈希路由，应该选择只在 router.js 中设置它，以允许处理 generate.routes。

还要注意 mode='universal' 等同于 ssr=true，所以 ssr=false 的配置 在这种模式下没有意义。如果生成静态站点，你需要 ssr=true，这样可以调用任何 asyncData() 和 fetch() 钩子来填充静态页面数据。这个设置还消除了在 dynamicRoutes() 中添加 /about、/contact 和 /portfolio 的需要，因为它们已经包含在生成的路由中。

GitHub PR