官方地址：monkeywans/vue-meta-info meta-info

(设置vue单页元信息信息，如果需要单页SEO，可以和prerender-spa-plugin形成更好的合作)

单页应用程序在前端大放异彩。Angular、Vue和React这三个框架是妇孺皆知的。随着单页应用的普及，人们在感受到完美的用户体验和强大的开发效率的同时，似乎也不可避免的要应对SEO的需求。

本文主要介绍了vue 2.0中单页Meta SEO的优化：

事实上，解决SEO问题不一定要通过服务器渲染来处理。服务器渲染对刚接触vue的新手就没那么友好了，虽然有官方的SSR中文文档。然而，无论从工作量还是从技术角度来看，将SSR与已经开发的vue项目相连接都是一项挑战。但是这些怎么可能很难得到优秀的前端程序员呢！

如果你调查服务器端渲染(SSR)只是用来提升几个营销页面(比如/、/关于、/联系等)的SEO。)，可能需要预渲染。不是使用web服务器实时动态编译HTML，而是在构建时通过预渲染简单地生成特定路线的静态HTML文件。这样做的好处是更容易设置预渲染，你可以把你的前端当作一个完全静态的站点。

如果您使用webpack，您可以使用prerender-spa-plugin轻松添加预渲染。它已经被Vue应用程序广泛测试。

预渲染为SEO提供了另一种可能。简单来说，预渲染就是当vue-cli构建的项目由NPM Run构建时，对应的html文件会根据路由层次结构进行动态渲染。

//web pack . conf . jsvar path=require(' path ')var PrerenderSpaPlugin=require(' prerender-spa-plugin ')模块. exports={ //.plugins :[new prerenderspaplugin(//需要存储已编译html的路径，路径。联接(_ _ dirname，'./dist ')，//列出哪些路由需要预先解析['/'，'/about '，'/contact ']]}最终会生成这样的目录

里面的内容将被呈现到一个静态的html文件中

与前一个相比，可能只是

html head meta charset=' utf-8 ' title tange che-PC/title/head body div id=' app '/div！-构建的文件会自动注入-脚本类型=' text/JavaScript ' src=' http 3360/app . js '/script/body/html可以直观地发现预渲染的功能。

有了预渲染，我们可以解决很多SEO问题，但是有时候我们也需要Meta信息的改变，比如标题，比如Meta keyWords或者链接.

这里安利推出了vue-meta-info，一个可以动态设置meta信息的vue插件。如果需要单页SEO，可以和prerender-spa-plugin形成更好的合作。

Vue-meta-info是一个基于vue 2.0的插件，可以让你更好的管理app中的meta信息。您可以直接在组件中设置元信息，然后自动将其安装到页面上。如果您需要随着数据的变化自动更新您的标题、元和其他信息，那么这个插件是完美的。当然，有时我们可能会遇到令人头痛的SEO问题，所以将这个插件与prerender-spa-plugin一起使用是完美的

1.装置

yarn:

纱线添加vue-meta-info2。npm:

NPM安装vue-meta-info-save 2。在全球范围内引入vue元信息

从“vue”导入vue从“vue-meta-info”导入MetaInfo vue . use(meta info)3。组件内元信息的静态使用

模板./templatescript导出默认{ meta info : { title : ' My Example App '，//设置标题meta: [{ //设置meta name: 'keyWords '，content : ' My Example App ' }]link :[{//设置link rel: 'asstes '，Href : ' 3https://Assets-cdn . github.com/' } } }/script 4。如果您的标题或元是异步加载的，您可能需要像这样使用它

模板./templatescript导出默认值{ name: 'async '，MetaInfo(){ return { title : this . page name } }，Data(){ return { page name : ' loading ' } }，mounted () {settimeout ()={this。pagename=' async'}，2000)}/脚本写在这里。每个人都应该理解我所说的另一个搜索引擎优化的想法，预搜索元信息

SEO问题可以在一定程度上解决。这种方法的优点是最低的代码入侵和最低的开发成本。但是也有缺点：

无法很好地处理用户唯一路由：例如，如果一条路线是/my-profile，预渲染可能不是很有用。因为此内容页面根据用户信息而变化，所以页面内容不是唯一的。您可以使用路由路径，如/users/:username/profile。然而，这是不合适的。频繁更改的文件需要预先呈现数千个路由文件：这可能会导致您的编译时间.嗯，你可能会编译很长时间，这就是本文的全部内容。希望对大家的学习有帮助，支持我们。