Vue单页面如何做seo页面优化

1、服务端渲染

服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。

2、预渲染方式

在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用 webpack，您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

我们使用vuecli打包出来的vue页面，只有一个html。不错这确实是spa牛逼的地方。 但是对于seo来说，这也是一个致命缺陷。 那就是，完全没法seo。这货连个实体页面都没有。那就很难受了。 此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入 这里你需要注意一点，你现在需要设置你的route为history模式。当然我们一直是这个模式，之前有人使用hash模式，那个是不可取的。 接着打开webpack.prod.conf.js这个文件在build文件夹中，添加 然后还是这个文件，找到plugins，在里面加入 注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。 然后重新输入 完成后是这样的 这只是一个治标不治本的解决办法！因为只有route中的页面被生成了静态页面，我们的内容页面是无法生成静态的。那么这该怎么办呢？如果你既想使用vue那简介的语法进行开发，又希望项目能实现cms那样自动生成静态的功能，你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发！ 请持续关注龙哥的后续教程！

---