从零开始搭建vue-ssr系列之六：一个完整的Vue-SSR项目

怎么取数据?

• 咱们首先得先经过node端来获取数据, 而后放到vuex里面保存起来, 放到Context中, 达到先后端共享数据的目的
• 在server-index.js中, 增长以下代码:

Vue.axios.get('http://localhost:5000/data').then((response) => {
    // 获取数据
    const list = response.data.data.liveWodList
    // 把数据存到Vuex里面
    store.commit(LIST.GET_DATA, list)
    // 把state存放到context中
    context.state = store.state
    resolve(app)
})

• 在/src/index.js(也就是client的入口文件中), 增长以下代码:

if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__)
}

• 经过以上步骤, 数据就已经在先后端共存了

编译

• 在实际生产中, 咱们会用webpack的插件vue-ssr-webpack-plugin来生成build/vue-ssr-bundle.json文件, webpack配置文件以下:

plugins: [
    new VueSSRPlugin({
        filename: './build/vue-ssr-bundle.json'
    })
]

• 在/server.js中咱们动态的读取build/vue-ssr-bundle.json, 生成html字符串, 返回到前端. 这里咱们会用到createBundleRenderer函数的别外一个参数, 该方法的第一个参数是上面的bundle.json文件, 第二个参数是一个对象, 咱们用的是{template:'xxx'}, 这个template的值为经过Client打包生成的HTML文件, 再经过node读取, 传递到参数中, 注意:该HTML必须包含<!--vue-ssr-outlet-->, 这个createBundleRenderer函数把这行代码替换成HTML.
• 至此, 真正的Vue-ssr就搭建完成了!!

码上GitHub

---

Vue-SSR系列目录

从零开始搭建vue-ssr系列之一：写在前面的话

从零开始搭建vue-ssr系列之二：纯client端渲染以及webpack2+vue2注意事项

从零开始搭建vue-ssr系列之三：服务器渲染的奥秘

从零开始搭建vue-ssr系列之四：Vuex详解

从零开始搭建vue-ssr系列之五：开始第一个简单的server-render

从零开始搭建vue-ssr系列之六：一个完整的Vue-SSR项目