Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候，一直苦于产品、客户对首屏加载要求，SEO的诉求，也想过很多解决方案，本次也是针对浏览器渲染不足之处，采用了服务端渲染，并且做了两个一样的Demo作为比较，更能直观的对比Vue前后端的渲染。
talk is cheap,show us the code!话不多说，我们分别来看两个Demo:（欢迎star 欢迎pull request）
1.浏览器端渲染Demo: https://github.com/monkeyWangs/doubanMovie
2.服务端渲染Demo:https://github.com/monkeyWangs/doubanMovie-SSR
两套代码运行结果都是为了展示豆瓣电影的，运行效果也都是差不多，下面我们来分别简单的阐述一下项目的机理：
一、浏览器端渲染豆瓣电影
首先我们用官网的脚手架搭建起来一个vue项目
npm install -g vue-cli vue init webpack doubanMovie cd doubanMovie npm install npm run dev
这样便可以简单地打起来一个cli框架，下面我们要做的事情就是分别配置 vue-router, vuex,然后配置我们的webpack proxyTable 让他支持代理访问豆瓣API。
1.配置Vue-router
我们需要三个导航页：正在上映、即将上映、Top250；一个详情页，一个搜索页。这里我给他们分别配置了各自的路由。在 router/index.js 下配置以下信息：
import Vue from 'vue' import Router from 'vue-router' import Moving from '@/components/moving' import Upcoming from '@/components/upcoming' import Top250 from '@/components/top250' import MoviesDetail from '@/components/common/moviesDetail' import Search from '@/components/searchList' Vue.use(Router) /** * 路由信息配置 */ export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'Moving', component: Moving }, { path: '/upcoming', name: 'upcoming', component: Upcoming }, { path: '/top250', name: 'Top250', component: Top250 }, { path: '/search', name: 'Search', component: Search }, { path: '/moviesDetail', name: 'moviesDetail', component: MoviesDetail } ] })
这样我们的路由信息配置好了，然后每次切换路由的时候，尽量避免不要重复请求数据，所以我们还需要配置一下组件的keep-alive：在app.vue组件里面。
<keep-alive exclude="moviesDetail"> <router-view></router-view> </keep-alive>
这样一个基本的vue-router就配置好了。
2.引入vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
简而言之：Vuex 相当于某种意义上设置了读写权限的全局变量，将数据保存保存到该“全局变量”下，并通过一定的方法去读写数据。
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
对于大型应用我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我们组装模块并导出 store 的地方 └── moving # 电影模块 ├── index.js # 模块内组装，并导出模块的地方 ├── actions.js # 模块基本 action ├── getters.js # 模块级别 getters ├── mutations.js # 模块级别 mutations └── types.js # 模块级别 types
所以我们开始在我们的src目录下新建一个名为store 的文件夹 为了后期考虑 我们新建了moving 文件夹，用来组织电影，考虑到所有的action,getters,mutations,都写在一起，文件太混乱，所以我又给他们分别提取出来。
stroe文件夹建好，我们要开始在main.js里面引用vuex实例：
import store from './store' new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
这样，我们便可以在所有的子组件里通过 this.$store 来使用vuex了。
3.webpack proxyTable 代理跨域