seo vue 动态路由_处理 Vue 单页面应用 SEO 的另一种思路

(设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合)

单页面应用在前端正大放光彩。三大框架 Angular、Vue、React，可谓妇孺皆知。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理 SEO 的需求。

本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍：

其实解决SEO问题不一定非得用服务端渲染来处理，服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。不过这些怎么能难得到伟大的前端程序员！

如果您调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO，那么您可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。

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

预渲染为SEO提供了另一种可能，简单的来说，预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件。

//webpack.conf.js

var path = require('path')var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports={//...

plugins: [newPrerenderSpaPlugin(//编译后的html需要存放的路径

path.join(__dirname, '../dist'),//列出哪些路由需要预渲染

[ '/', '/about', '/contact']

)

]

}

最终会生成类似于这样的目录结构

而里面的内容都会被渲染成了静态的 html 文件

相对于之前的可能只有

tangeche-pc