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

Question

我想知道为什么当我点击"View Page Source“时，不能显示正确的标题和meta标签。显示的是我的nuxt.config.js文件中的元标记信息。

我如何从我的特定页面中获取元数据以显示在页面源中？我需要这个用于搜索引擎优化的目的。

这是我的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.' }
    ],
  },

这是页面的源标题和meta标签。正如您所看到的，它是从nuxt.config.js文件而不是index.vue文件中拉出的。

​

​

然而，当我检查元素时，我在head部分得到了正确的meta标记。

​

谁能解释一下我做错了什么？我需要的页面特定的标题和页面特定的元标签出现在搜索引擎优化的页面来源。

Answer 1

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

如果您尝试构建您的应用程序(如果Nuxt遵循标准实践，则可能使用npm run build )，并查看构建的index.html文件，它是否具有您期望的<title>？