Nuxt 静态网站不生成正文内容

Question

使用nuxt generate 生成项目并以这种方式为_slug 页面创建路由：

 generate: {
      routes() {
        return axios.get('https://mywebsite.xyz/categories').then(res => {
          return res.data.data.map(category => {
           return '/collections/' + category.id
         })
      })
    },
  },

路由生成正常但body为空，可以在这里查看：Website Link

我的 nuxt.config：

 export default {
   ssr: false,
   target: 'static',

     router: {
     base: '/',
     extendRoutes(routes, resolve) {
         routes.push({
            path: '/collections/:slug',
            components: {
               default: resolve(__dirname, 'pages/collections'), // or routes[index].component
            },
           chunkNames: {
              modal: 'components/modal'
           }
       })
     },
   },

如何生成和html网站一模一样的body？

P.S 忘了提一件重要的事情。我正在使用async fetch 加载数据：

 async fetch() {
     this.filters.category = this.$route.params.slug;
     await this.$store.dispatch('filter/getProducts',
        { Product: Product.filter(this.filters)
     });
 },

 

Answer 1

当使用nuxt generate 时，webpack 会创建一个类似于 SPA 的静态文件，但包含更多细节的动态内容（如部分产品排序）可能来自 API，因此不会呈现

修复 1

尝试使用 Heroku 或 vercel 来托管此应用程序或任何节点服务器，以便在发送前预先填充数据

修复 2

在将数据发送给用户之前，使用asyncData 获取和填充数据

export default {
  async asyncData(context) {
    const id = context.params.id
    try {
      // Using the nuxtjs/http module here exposed via context.app
      const post = await context.app.$http.$get(
        `https://api.nuxtjs.dev/posts/${id}`
      )
      return { post }
    } catch (e) {
      context.error(e) // Show the nuxt error page with the thrown error
    }
  }
}

Answer 2

编辑：为了清楚起见，你可以运行开发人员

• nuxt 或 nuxt dev（别名）

对于完整静态应用的本地测试，您可以：

• nuxt generate
• nuxt start
• (nuxt serve 实际上已弃用，如果不是，请仔细检查 您为 Nuxt 安装了 2.14.X 或 2.15.0 版本）

用于您的 NON 静态应用 (target: server) 的本地测试，也就是仅限 SSR

• nuxt build
• nuxt start

对于目录，.nuxt 本质上是用于开发目的的本地构建 + 缓存的 webpack 版本。 dist 是您将指向几乎所有目标（在生产中）的应用程序的入口点。

nuxt build 是如果您想以仅 SSR 的方式构建项目，也就是这将需要存在 NodeJS。
nuxt generate 可以让您在 Github 页面上转储文件，而无需任何服务器。 有关这些命令的更多详细信息here。

另外，我猜你买了一个 VPS 或类似的，你尝试设置整个应用程序来运行 nginx 等等？我将无法在这里为您提供帮助，顺便说一句，它应该是另一个问题的一部分。

但现在，我建议您尝试在本地 generate 应用程序并仔细检查一切是否正常（应该是！）。然后，我不能强调使用像Vercel 或Netlify 这样的平台。我没有赞助或其他任何东西，他们的平台太棒了，不能使用。它将为您提供出色的性能，让事情变得超级简单，您将能够轻松插入一些 [Netlify] 插件并且...它是免费的（静态托管并不难托管，例如 Github Pages）。

官方文档中实际上有一整节关于deployment。我绝对推荐这些解决方案（静态托管平台），因为它们更容易设置/部署，比 VPS 更便宜，环保并且具有更多开箱即用的功能。这实际上是 JAMstack 的重点。

---

---

您有ssr: false，如果您明确告诉它仅在您的客户端上生成您的应用程序，您的应用程序将无法生成内容。如果您想要一个同构或 通用 应用程序既可以在服务器前端 (SEO) 上运行并且仍然可以从 SPA 中受益（感谢水化），您需要删除此行或将其设置为 @ 987654346@.

更多详情可关注官方ssr property page。

服务器端渲染将仅在dev 和构建时间 (nuxt generate) 期间使用，然后可以上传到任何 CDN。但是现在，如果你去你的托管网站并禁用 JS，你会看到一个空白页面。

或者您可以按ctrl + u 检查您的源代码，您会看到您当前的应用仅在客户端上呈现。这就解释了为什么您不能生成这些路由（因为它是在节点构建期间完成的操作）。

顺便说一句，我不确定你的应用程序是如何工作的，但如果你的页面做得正确，你甚至可能不需要自己制作路由，因为 Nuxt integrates a crawler 现在开箱即用。

---

TLDR：将 ssr 布尔值设置为 true 并再次检查您的应用（源代码或禁用 JS）以查看生成的静态内容。很像任何nuxt 网页。

Answer 3

在玩了 3 周的静态页面后，我终于让它工作了。

我已经尝试了上面作者的所有建议，但没有任何帮助。在我的情况下，页面是静态生成的，但在 npm start 上的项目在 ctrl+u （铬）上，因为正文有 然后是 gtm 标签。

正如我在 nuxt 文档中发现的那样，我看到该页面是因为我总是被重定向到 200.html 或 404.html，因为我的代码中有错误并且我的 nuxt 已过时 (2.14.9)。

在将 nuxt 更新为 v2.15.3 并从 chrome 禁用 javascript 执行后，我能够看到生成重定向和错误的原因。我购买的 Nuxt 模板不是为静态项目制作的，因此，很多事情都崩溃了。我不得不移除或重建它们。

如果以后有人遇到同样的问题，我建议：

1. 尝试@kissu 推荐的解决方案。
2. 将 nuxt 更新到最新版本
3. 尝试用npm up更新其他包
4. 尝试安装@nuxtjs/router 并使用router.js 测试最少数量的路由

另外，如果您只是想开发一个nuxt 静态项目，请测试它是如何从请求中静态生成和运行的。

如果您在 vuex 中使用 async fetch 而不是 asyncData，这里是一个很好的静态电子商务项目示例：

https://github.com/sdras/ecommerce-netlify

我的实际 nuxt.config：

   ssr: true,
   target: 'static',
   server: {
     port: 4000,
     host: 'localhost',
   },

   router: {
    base: '/',
    trailingSlash: true,
   },

Answer 4

我也为同样的问题苦苦挣扎了一段时间，我可以确认 Alex St 的解决方案有效。

我将 Nuxt 版本从 2.14.6 更新到 2.15.4，并且 Nuxt 不再对 index 以外的所有页面使用 spa 模式。所有页面现在都是静态 HTML。

在将 Nuxt 更新到 2.15 时，如果子文件夹中有组件（例如 ./components/shared），建议遵循 Nuxt/components 迁移指南。