如何获取配置头设置以在 Nuxt2 (vue.js) 中设置页面 og:title？答案

【问题标题】：How to get config head setting to set page og:title in Nuxt2 (vue.js)?如何获取配置头设置以在 Nuxt2 (vue.js) 中设置页面 og:title？
【发布时间】：2022-07-05 15:09:31
【问题描述】：

我正在使用 Nuxt.js 来构建我的项目。

我在nuxt.config.js 中设置了head，并希望在页面中获取设置。

// nuxt.config.js
export default {
    ...
    head: {
        title: \'SITE NAME\',
        titleTemplate: \'%s | SITE NAME\',
        meta: [
            { charset: \'utf-8\' },
            { \'http-equiv\': \'X-UA-Compatible\', content: \'IE=edge\' },

            { name: \'viewport\', content: \'width=device-width, initial-scale=1\' },
            { hid: \'description\', name: \'description\', content: \'SITE DESCRIPTION\' },

            { hid: \'itemprop-name\', itemprop: \'name\', content: \'SITE NAME\' },
            { hid: \'itemprop-description\', itemprop: \'description\', content: \'SITE DESCRIPTION\' },
            { hid: \'itemprop-image\', itemprop: \'image\', content: process.env.BASE_URL + \'/assets/img/og_img.png\' },

            { hid: \'og:site_name\', property: \'og:site_name\', content: \'SITE NAME\' },
            { hid: \'og:title\', property: \'og:title\', content: \'SITE NAME\' },
            { hid: \'og:description\', property: \'og:description\', content: \'SITE DESCRIPTION\' },
            { hid: \'og:url\', property: \'og:url\', content: process.env.BASE_URL },
            { hid: \'og:image\', property: \'og:image\', content: process.env.BASE_URL + \'/assets/img/og_img.png\' },
            { hid: \'og:image:width\', property: \'og:image:width\', content: \'1200\' },
            { hid: \'og:image:height\', property: \'og:image:height\', content: \'630\' },
            { hid: \'og:type\', property: \'og:type\', content: \'website\' },

            { hid: \'twitter:card\', name: \'twitter:card\', content: \'summary_large_image\' },
            { hid: \'twitter:title\', name: \'twitter:title\', content: \'SITE NAME\' },
            { hid: \'twitter:description\', name: \'twitter:description\', content: \'SITE DESCRIPTION\' },
            { hid: \'twitter:image\', name: \'twitter:image\', content: process.env.BASE_URL + \'/assets/img/og_img.png\' }
        ],
    },
}

// about.vue (page.vue)
export default {
    data () {
        return {
            pageTitle: \'PAGE TITLE\',
            description: \'PAGE DESCRIPTION\',
        }
    },
    head () {
        return {
            title: this.pageTitle,
            meta: [
                { hid: \'description\', name: \'description\', content: this.description },

                { hid: \'itemprop-name\', itemprop: \'name\', content: `${this.pageTitle} | SITE NAME` },
                { hid: \'itemprop-description\', itemprop: \'description\', content: this.description },

                { hid: \'og:title\', property: \'og:title\', content: `${this.pageTitle} | SITE NAME` },
                { hid: \'og:description\', property: \'og:description\', content: this.description },

                { hid: \'twitter:title\', name: \'twitter:title\', content: `${this.pageTitle} | SITE NAME` },
                { hid: \'twitter:description\', name: \'twitter:description\', content: this.description }
            ]
        }
    }
}

我尝试使用this.title，this.$config，this.$route.meta，都错了。

如何获取页面中的nuxt.config.js 设置？

Nuxt 版本：2.14.5

节点版本：14.16.1

标签： vue.js nuxt.js seo facebook-opengraph

【解决方案1】：

没有声明性方法可以获取存在于nuxt.config.js 文件中的所有Nuxt 配置。

nuxt.config.js 中的head 属性用于向所有页面添加通用head 元素。

如果要在整个项目中存储全局配置，例如SITE NAME，则需要使用publicRuntimeConfig

   publicRuntimeConfig: {
    siteName: 'SITE NAME'
  }

然后你可以通过this.$config.siteName在任何组件中使用它

【讨论】：

谢谢！这对我的问题帮助很大。