全局设置

在 nuxt.config.js 中配置网站 title、ico 和 meta 标签：

head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico',
      },
    ],
  },

单独配置

为某个单独页面配置 title、ico 和 meta 标签：

使用 head 方法设置当前页面的头部标签。

在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。

注意：为了避免子组件中的 meta 标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为 meta 标签配一个唯一的标识编号。

export default {
  ...

  head() {
    return {
      title: this.$t('home.title'),
      meta: [
        { hid: 'description', name: 'description', content: this.$t('home.description') },
        { hid: 'og:site_name', property: 'og:site_name', content: 'hstream.io' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:title', property: 'og:title', content: this.$t('home.title') },
        { hid: 'og:description', property: 'og:description', content: this.$t('home.description') },
        { hid: 'og:url', property: 'og:url', content: 'https://xxxx.com' + this.$route.path },
        {
          hid: 'og:image',
          property: 'og:image',
          content: '/images/logo.png',
        },
      ],
    }
  },
}