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

Question

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

使用API​​提取数据时是否可以生成100％的静态网站，以便摆脱API和请求？

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

1. 直接通过网址栏访问页面时，没有错误（预期行为）
2. 通过路线导航到页面时，即使已获取数据并且{{1}已被获取，页面仍将请求发送至API （在本地计算机外部不存在）。 }文件是在生成过程中已经使用数据生成的。

使用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页面中，则有一个技巧可以通过直接在地址栏中输入网址来使您的路由可访问。您只需配置Webpack即可生成多个具有相同index点的entry文件，这些文件将基于您的directory存储在每个routes中。

如果您使用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会在photography目录内自动创建一个dist目录。

如果您查看自己的dist目录，则会看到其中带有index.html的目录。

因此，当您在地址栏中输入路线时，它实际上将访问这些目录之一并显示index.html。

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

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

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