Vue项目seo: 使用vue-meta-info动态生成meta标签
众所周知，vue这种单页面的项目是不利于seo的，但是在实际项目中，像一些交互网站，不可避免会考虑一些seo问题。即使是vue这种项目，我们还是可以通过一些其他技术解决seo问题的。
例如vue项目中的meta标签，可以通过 vue-meta-info 动态生成“关键字”和“页面描述”，来优化页面的seo
使用此插件可以配合 预渲染插件 prerender-spa-plugin
安装 vue-meta-info：
通过npm：
npm install vue-meta-info --save
通过yarn：
yarn add vue-meta-info
使用：
main.js
// 引入 vue-meta-infoimport Vue from 'vue'import MetaInfo from 'vue-meta-info'// 注册 vue-meta-info Vue.use(MetaInfo)
组件内静态使用：
..........export default { metaInfo: { title: '', // 设置title meta: [{ name: 'keywords', // 设置关键字 content: '这是关键字' }, { name: 'description', // 设置页面描述 content: '这是页面描述' }], link: [{ // 设置link rel: 'asstes', href: 'https://me.csdn.net/weixin_45426836' }] }}
组件内动态使用：
如果组件中使用了异步请求数据，可以使用 metaInfo() 方法
..........export default { name: 'async', metaInfo () { return { title: this.pageName } }, data () { return { pageName: 'title' } }, mounted () { setTimeout(() => { this.pageName = 'async' }, 2000) }}