从零开始搭建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必须包含, 这个createBundleRenderer函数把这行代码替换成HTML.
至此, 真正的Vue-ssr就搭建完成了!!