VUE(SPA)项目中使用SEO-动态生成META标签

上文中提到过这里主要使用的是 vue-meta-info ，下面来和大家说一下它的用法

安装

大家可以选择不同的安装方式

Yarn:

$ yarn add vue-meta-info

NPM:

$ npm install vue-meta-info --save

引入

引入方式很简单，没有什么难理解的，照做就是了

import Vue from'vue'

import MetaInfo from 'vue-meta-info' 

Vue.use(MetaInfo)

使用

使用方式的话会分为两种(接下来会举一些官网上的例子)：

1、静态使用:    

    使用时注意，meta里可以写多个map，下面这个例子中只写了keyWords

2、动态使用

这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式：

    这些配置好了之后，就可以测试一下啦，打开调试工具，点击到Elements一栏，看下head标签下是否有你刚刚生成的meta，如果有的话，那么恭喜你，你成功的征服了它