vue ssr+koa2构建服务端渲染的示例代码

// 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
// 否则会导致客户端和服务端数据不统一造成渲染错误
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}

entry-client.js

import { createApp } from './main'
const { app, router, store } = createApp()
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__)
}
router.onReady(() => {
 router.beforeResolve((to, from, next) => {
 const matched = router.getMatchedComponents(to)
 const prevMatched = router.getMatchedComponents(from)
 let diffed = false
 const activated = matched.filter((c, i) => {
  return diffed || (diffed = prevMatched[i] !== c)
 })
 if (!activated.length) {
  return next()
 }
 Promise.all(
  activated.map(component => {
  if (component.asyncData) {
   component.asyncData({
   store,
   route: to
   })
  }
  })
 )
  .then(() => {
  next()
  })
  .catch(next)
 })
 app.$mount('#app')
})

最后

完整代码参考 github地址

顺便贴上这张图

 

到此这篇关于vue ssr+koa2构建服务端渲染的示例代码的文章就介绍到这了,更多相关vue ssr koa2 服务端渲染内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！