Nuxt 404 页面刷新页面答案

【问题标题】：Nuxt 404 Page on Refresh of pageNuxt 404 页面刷新页面
【发布时间】：2019-11-27 17:29:55
【问题描述】：

我是 Nuxt 的新手。我创建了一个静态站点，结果很好，但现在创建了一个包含动态内容的站点（如博客）。我会有这样的结构：

->posts/
-->index.vue
-->_slug.vue

运行npm run dev 时，我可以转到mysite.test/posts/slug-1 并获得我想要的页面。如果我刷新我仍然会得到我想要的那个页面。

问题出现在我构建它时。我使用npm run build --spa（不是生成，我知道生成创建静态文件，我必须为每个帖子制作一个静态文件）。现在，如果我转到 mysite.test/posts/ 并单击一个帖子，它会导航到 mysite.test/posts/slug-1 并且它可以工作。如果我直接去网址或者刷新，就不行了？

该网站明确表示 SPA 模式适用于动态路线，但据我所知，它只能导航到它们，而不是直接链接？

【问题讨论】：

是的，您需要设置一个代理，将请求代理到 index.html。
@Aldarund 有这方面的文档吗？好像是在使用SPA功能时应该提到的事情
这是世界上任何水疗应用程序的运作方式。您可以通过 spa nginx 配置在谷歌上搜索它，这完全取决于您如何托管您的应用程序

标签： nuxt.js

【解决方案1】：

Nuxt 不知道您有哪些动态路由，因此您需要在nuxt.config.js 的生成配置选项中指定它们。阅读更多here。

你会这样做：

export default {
  generate: {
    routes: [
      '/posts/slug-1',
      '/posts/slug-2',
      '/posts/slug-3'
    ]
  }
}

执行此操作后，如果您刷新，它将不再在动态路由页面上为您提供 404。

【讨论】：

请注意，您实际上可以创建async routes() 并动态生成页面