Vue-meta 的使用方法与技巧

一、Vue-meta 简介与安装

1、Vue-meta 是一个 Vue.js 的插件，允许你在组件中操作应用的 meta 信息，如标题、描述等。它对于单页应用 (SPA) 和服务端渲染 (SSR) 的项目特别有价值，因为它们在处理 meta 信息方面要比传统的多页面应用要复杂得多。

2、为了使用 Vue-meta，首先需要安装。推荐使用 npm 进行安装，执行以下命令即可：


npm install vue-meta

3、接下来，需要在 Vue 项目中引入并使用 Vue-meta。在项目的 main.js 文件中，添加如下代码：


import Vue from 'vue';
import VueMeta from 'vue-meta';

Vue.use(VueMeta);

二、在组件中使用 Vue-meta

1、安装并引入 Vue-meta 后，可以在 Vue 组件中使用它。要在组件中添加 meta 信息，如标题、描述等，可以在组件内添加一个名为 metaInfo 的对象，然后在其中设定相关的信息：


export default {
  data() {
    return {
      message: 'Hello, Vue-meta!'
    };
  },
  metaInfo: {
    title: 'Vue-meta 示例',
    meta: [
      {
        name: 'description',
        content: '这是一个演示 Vue-meta 的示例项目'
      },
      {
        name: 'keywords',
        content: 'vue-meta, 示例, 示例项目'
      }
    ]
  }
};

2、上述代码中，我们设定了页面的 title（标题）为 "Vue-meta 示例"，并添加了两个 meta 标签：description（描述）和 keywords（关键词）。组件渲染时，Vue-meta 将自动更新这些 meta 信息。

3、另外，Vue-meta 还支持使用动态数据。例如，可以在 computed 属性里计算 title，使其根据 data 数据变化而变化：


export default {
  data() {
    return {
      message: 'Hello, Vue-meta!'
    };
  },
  computed: {
    pageTitle() {
      return Vue-meta 示例 - ${this.message};
    }
  },
  metaInfo() {
    return {
      title: this.pageTitle,
      meta: [
        {
          name: 'description',
          content: '这是一个演示 Vue-meta 的示例项目'
        },
        {
          name: 'keywords',
          content: 'vue-meta, 示例, 示例项目'
        }
      ]
    };
  }
};

三、Vue-meta 的高级用法

1、Vue-meta 不仅可以设置 meta，还支持设置其他 HTML 标签，如 link、style、script 等。下面是一个为页面添加样式和脚本的例子：


metaInfo: {
  title: 'Vue-meta 示例',
  meta: [
    {
      name: 'description',
      content: '这是一个演示 Vue-meta 的示例项目'
    },
    {
      name: 'keywords',
      content: 'vue-meta, 示例, 示例项目'
    }
  ],
  link: [
    {
      rel: 'stylesheet',
      href: 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'
    }
  ],
  script: [
    {
      src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
      async: true,
      body: true,
    }
  ]
}

2、Vue-router 与 Vue-meta 配合使用时，可以很方便地管理各个路由的 meta 信息。下面是一个例子：


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: HomeComponent,
      meta: { metaInfo: { title: '首页' } }
    },
    {
      path: '/about',
      component: AboutComponent,
      meta: { metaInfo: { title: '关于我们' } }
    }
  ]
});

router.afterEach((to) => {
  if (to.meta.metaInfo) {
    router.app.$meta().refresh();
  }
});

四、服务端渲染（SSR）与 Vue-meta

1、对于服务端渲染（SSR）的应用来说，Vue-meta 更显得至关重要。因为在服务端渲染时，需要提前为每个页面生成对应的 meta 信息。首先，请确保在 Vue 项目中已引入并使用了 Vue-meta。

2、在使用 SSR 的 Vue 项目中，通常会有一个 entry-server.js（或类似命名）的文件，负责搭建服务端渲染的环境，以及将渲染结果返回给客户端。在这个文件中，需要对 Vue-meta 进行额外的配置。下面是一个配置的例子：


import { createApp } from './app';

export default async context => {
  const { app, router } = createApp();

  router.push(context.url);

  await new Promise(router.onReady.bind(router));

  const meta = app.$meta();
  context.meta.inject = () => meta.inject();

  return app;
};

3、此外，还需要在所使用的模板中按照规范插入 meta 信息。以下是一个标准的 HTML 模板结构：





  {{ METAS }}
  {{ TITLE }}
  {{ LINKS }}
  {{ STYLES }}
  {{ SCRIPTS }}


  {{{ APP }}}
  {{ BODY_SCRIPTS }}

通过这样的配置，服务端渲染应用在生成每个页面时，将自动包含 Vue-meta 设置的 meta 信息，从而提高 SEO 效果。