今年开源了一个博客系统；但其中一个项目开发完成后，遇到了大问题：由于采用的是Vue的单页面模式进行开发，网站信息搜索引擎无法做索引,导入收录只有是首页！

搜索引擎无法进行索引的核心原因就是，其在爬取网站数据的时候，是不会执行其中包含的JS过程的；而采用Vue的方式开发的应用，其数据都是来源于axios或者其它的ajax方法获取的数据！也就是说，想要友好的支持搜索引擎，就必须采用服务器端渲染的相关技术，比如JSP，就是一个典型的服务器端渲染技术，用户请求一个地址然后展示到浏览器中的数据都是服务器端处理好的，浏览器只管展示；又比如静态页面，所有页面都是预先编写或生成好的，浏览器将请求拿到的数据直接展现即可。

对于Vue生态来说，有以下方案可以实现服务器端渲染：

1.SSR服务器渲染； 2.静态化； 3.预渲染prerender-spa-plugin； 4.使用Phantomjs针对爬虫做处理。

对于Java生态来说，有以下方案可以实现服务器端渲染：

1.JSP 2.模板引擎，如Thymeleaf/Velocity等；

JSP基本已经算是步入老年，除了一些非常古老的系统，新的相信已经很少人使用。Thymeleaf在Spring官网文档中都有相关的集成案例，如果是一个全新的项目，应该算是比较好的方案；但对于已经完成前端所有功能开发的项目来说，使用模板引擎重新实现一套成本过高。对于我来说，也只能选择SSR服务器渲染方案了。

关于Vue服务器端渲染的介绍，可以参考官方文档：http://cn.vuejs.org/v2/guide/ssr.html。这其中主要有两种方式，其一是使用vue-server-renderer插件，其二是使用nuxt；在本项目做改造时，关于vue-server-renderer的介绍不如现有文档清晰，因此使用了nuxt的方案。

nuxt与传统的vue-cli项目，在目录结构、路由、组件生命周期上都有所不同；主要的改造步骤如下：

2.1创建项目

2.2将你的文件都复制过来

2.3 package.json

2.4安装组件

2.5 nuxt.config.js 引入组件

2.6配置路由守卫（路由拦截器）

2.7配置静态渲染模板

默认在根目录下，文件名字为app.html {{ HTML_ATTRS }} {{ HEAD_ATTRS }}都是固定写法

2.8 标签使用

由于很多是组件是客户端使用的，如果你在服务端渲染，就会报doment找不到的问题所以采用nuxt的client-only标签

2.9路由配置

具体我这里不做演示了，请参考官方文档 http://www.nuxtjs.cn/guide/routing

2.10数据存储

请使用cookie-universal-nuxt 进行存储，如果使用cookie.js会出现只能客户端获取收据服务端获取不到

2.11数据请求

请安装官网推荐的@nuxtjs/axios

封装axios

使用

2.12配置默认错误页面