vue.js - 元标记在 Nuxt.js 应用程序的页面源中无法正确显示

Question

我想了解为什么在单击“查看页面源代码”时不显示正确的标题和元标记。显示的是我的 nuxt.config.js 文件中的元标记信息。

如何从我的特定页面获取元数据以显示在页面源代码中？我需要这个用于 SEO 目的。

这是我的 pages/index.vue 文件

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  head () {
    return {
      title: "this is the page specific title",
      meta: [
        { hid: 'description', name: 'description', content: 'Page 1 description' }
      ]
    }
  }
}
</script>

这是我的 nuxt.config.js 文件(我只是发布了我有默认标题和元标签的部分:

module.exports = {
  mode: "universal",
  head: {
    title: "this is the nuxt.config title",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2' },
      { hid: 'description', name: 'description', content: 'This is the generic description.' }
    ],
  },

这是页面源标题和元标记。如您所见，它是从 nuxt.config.js 文件而不是 index.vue 文件中提取的。

但是，当我检查元素时，我在 header 部分获得了正确的元标记。

谁能解释一下我做错了什么？出于 SEO 目的，我需要页面特定标题和页面特定元标记出现在页面源中。

Answer 1

我个人没有用过Nuxt，但是有没有可能因为你是本地开发，没有体验到Nuxt的SSR部分，只体验到动态渲染部分？

如果您尝试构建您的应用程序(如果 Nuxt 遵循标准做法，可能使用 npm run build)，并查看构建的 index.html 文件，它是否有 <title>你在期待吗？