從零開始搭建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項目