vue ssr 指南详读

git clone https://github.com/s249359986/learnssr.gitcd learnssr npm installnpm run dev

src├── components│  ├── Foo.vue├── views│  ├── Home.vue├── App.vue├── app.js ├── client-entry.js├── server-entry.js

if (isProd) { /**  生产环境，createRenderer将已经通过webpack打包好的server-bundle.js转化为一个可以操作的renderer对象。 **/ renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8'))  /** 入口模板文件 **/ indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))} else { /**  开发环境，createRenderer将已经通过webpack打包好的server-bundle.js转化为一个可以操作的renderer对象。 **/ require('./build/setup-dev-server')(app, {  bundleUpdated: bundle => {   renderer = createRenderer(bundle)  },  indexUpdated: index => {//index为入口文件及index.html   indexHTML = parseIndex(index)  } })}function createRenderer (bundle) { return require('vue-server-renderer').createBundleRenderer(bundle, {  cache: require('lru-cache')({   max: 1,//1000,   maxAge: 2000//1000 * 60 * 15  }),  runInNewContext: false })}/*读取入口文件*/function parseIndex (template) { const contentMarker = '<!-- APP -->' const i = template.indexOf(contentMarker) return {  head: template.slice(0, i),  tail: template.slice(i + contentMarker.length) }}const serve = (path, cache) => express.static(resolve(path), { maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0})app.use('/dist', serve('./dist'))app.get('*', (req, res) => { if (!renderer) {  return res.end('waiting for compilation... refresh in a moment.') } res.setHeader('Content-Type', 'text/html') res.setHeader('Server', serverInfo) var s = Date.now() const context = { url: req.url } /*  渲染vue实例，context对象上下文 */ const renderStream = renderer.renderToStream(context) renderStream.once('data', () => {  res.write(indexHTML.head) }) renderStream.on('data', chunk => {  res.write(chunk) }) renderStream.on('end', () => {  if (context.initialState) {   res.write(    `<script>window.__INITIAL_STATE__=${     serialize(context.initialState, { isJSON: true })    }</script>`   )  }  res.end(indexHTML.tail)  console.log(`whole request: ${Date.now() - s}ms`) }) renderStream.on('error', err => {  if (err && err.code === '404') {   res.status(404).end('404 | Page Not Found')   return  }  res.status(500).end('Internal Error 500')  console.error(`error during render : ${req.url}`)  console.error(err) })})const port = process.env.PORT || 8080app.listen(port, () => { console.log(`server started at localhost:${port}`)})

export default context => { const s = isDev && Date.now() router.push(context.url) const matchedComponents = router.getMatchedComponents() if (!matchedComponents.length) {  return Promise.reject({ code: '404' }) } return Promise.all(matchedComponents.map(component => {/*增加服务端数据预处理 start*/  if (component.asyncData) {     return component.asyncData({      store,      route: router.currentRoute     })    }    /*    增加服务端数据预处理 end    */ })).then(() => {  isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)  context.initialState = store.state  return app })}

/*第一种方式 */Vue.mixin({ beforeMount () {  const { asyncData } = this.$options console.log('beforeMount',this.$store)  if (asyncData) {   // 将获取数据操作分配给 promise   // 以便在组件中，我们可以在数据准备就绪后   // 通过运行 `this.dataPromise.then(...)` 来执行其他任务   this.dataPromise = asyncData({    store: this.$store,    route: this.$route   })  } }, beforeRouteUpdate (to, from, next) { const { asyncData } = this.$options console.log('beforeRouteUpdate',this.$store) if (asyncData) { asyncData({  store: this.$store,  route: to }).then(next).catch(next) } else { next() }}})/**更新客户端store，与服务端store同步**/// store.replaceState(window.__INITIAL_STATE__)if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__)}// actually mount to DOMrouter.onReady(() => {/**挂载实例，客户端激活，所谓激活，指的是 Vue 在浏览器端接管由服务端发送的静态 HTML，使其变为由 Vue 管理的动态 DOM 的过程。注释掉app.$mount('#app') 可以清楚看到<div id="app" data-server-rendered="true"> 客户端通过data-server-rendered="true"知道该html是vue在服务端渲染的，并且不会在做多余的渲染。由于在服务端无法绑定事件，只有通过客户端vue处理。**/ app.$mount('#app')})