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

Question

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

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

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

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

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

Answer 1

如果您在 github 页面中托管站点，可以通过直接在地址栏中输入 url 来访问您的路线。您只需要配置您的 webpack 以生成多个 index 文件，这些文件具有相同的 entry 点，这些文件将根据您的 routes.

存储在每个 directory 中

如果您使用 vue-cli 生成项目，这很容易实现。

例如，我有这些路线：

,

我只需要在项目的根目录中创建一个 vue.config.js。

在 vue.config.js 文件中，我只需要根据我的 router 上的内容再注册几个 pages。每个 entry 点应该是你的 main.js 文件，模板应该是你的 index.html.

文件名应该是<your-route>/index.html

如果您在 filename 中输入了子目录，如果这些目录在编译期间不存在，Vue 将自动创建它们。因此，如果您输入的文件名是 photography/index.html，Vue 将自动在 dist 目录中创建一个 photography 目录。

如果你检查你的 dist 目录，你会看到里面有 index.html 的目录。

所以当你在地址栏中输入你的路由时，它实际上会访问这些目录之一并显示 index.html。

这就是我对我在 github 帐户中托管的主页所做的实际操作。

这是我的 github 页面： https://wisdomsky.github.io/

我有两个页面 about 和 photography 如果您在地址栏中输入 https://wisdomsky.github.io/photography，它将呈现我的摄影页面而不是接收 Github 404页。

Answer 2

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

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

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

示例:

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

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

How to generate 100% Static website with Nuxt.js without API request?