如何在没有 API 请求的情况下使用 Nuxt.js 生成 100% 静态网站？

Question

我正在使用Nuxt.js进行测试以生成静态网站。

是否可以在使用 API 获取数据时生成 100% 静态站点，以便摆脱 API 和请求？

根据我到目前为止的测试，所有文件都正确生成并托管在Github 页面上并且可以访问，除了：

1. 通过 URL 栏直接点击页面时，没有错误（预期行为）
2. 当通过路由导航到页面时，页面仍然向 API 发送请求（在本地机器之外不存在），即使已经获取数据并且.html在生成过程中已经使用数据生成文件。

使用asyncData从 API 获取组件的数据。

Answer 1

解决方案是使用 vuex（状态管理）并在生成过程中用数据填充状态。

该状态将已填充在生成的.html文件中

有关更多信息，请参阅正在讨论的该线程。

例子：

async fetch({ store }) {
  if (_.isEmpty(store.getters['tags/getTags'])) {
    await store.dispatch('tags/fetchTags');
  }
},

• fetch方法用于在渲染页面之前填充store
• fetchTags是向 api 发出请求并填充状态的操作
• 逻辑非常简单：如果tags状态尚未填充，则通过向 api 发出请求来填充状态
• 运行时nuxt generate，将填充部署的状态，因此不会发送 api 请求
• 状态将被注入到 .html 文件中（下图供参考）

如果有人有更好的解决方案，请分享，我很乐意接受该答案作为正确的答案:)