如何将配置头设置设置为设置页面OG：NUXT2（vue.js）中的标题？

Question

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

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

// 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

Answer 1

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

head nuxt.config.js 中的属性用于将常规 head 元素添加到您的所有页面。

如果要在整个项目中存储全局配置，例如站点名称，您需要使用 publicRuntimeConfig ，

   publicRuntimeConfig: {
    siteName: 'SITE NAME'
  }

则可以通过 this来在任何组件中使用它。 $ config.siteName

以获取更多资源。