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

Question

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

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

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

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

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

Answer 1

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

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

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

示例：

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

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

---

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

Answer 2

如果您在 github 页面中托管您的网站，有一个技巧可以通过直接在地址栏中输入 url 来访问您的路线。您只需要配置您的 webpack 以生成多个具有相同 entry 点的 index 文件，这些文件将根据您的 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 页面。