目录结构

// 创建express应用
const app = express()
// 读取模版文件
const template = fs.readFileSync(resolve('./src/templates/index.template.html'), 'utf-8')
// 调用vue-server-renderer的createBundleRenderer方法创建渲染器，并设置HTML模板，之后将服务端预取的数据填充至模板中
function createRenderer (bundle, options) {
  return createBundleRenderer(bundle, Object.assign(options, {
    template,
	 basedir: resolve('./dist'),
    runInNewContext: false
  }))
}

let renderer
let readyPromise
if (!isDev) {
  // 生产环境下，引入由webpack vue-ssr-webpack-plugin插件生成的server bundle
  const bundle = require('./dist/vue-ssr-server-bundle.json')
  // 引入由 vue-server-renderer/client-plugin 生成的客户端构建 manifest 对象。此对象包含了 webpack 整个构建过程的信息，从而可以让 bundle renderer 自动推导需要在 HTML 模板中注入的内容。
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  // vue-server-renderer创建bundle渲染器并绑定server bundle
  renderer = createRenderer(bundle, {
    clientManifest
  })
} else {
  // 开发环境下，使用dev-server来通过回调把内存中的bundle文件取回
  // 通过dev server的webpack-dev-middleware和webpack-hot-middleware实现客户端代码的热更新
  readyPromise = require('./build/setup-dev-server')(app, (bundle, options) => {
    renderer = createRenderer(bundle, options)
  })
}
// 设置静态资源访问
const serve = (path, cache) => express.static(resolve(path), {
  maxAge: cache && isDev ? 0 : 1000 * 60 * 60 * 24 * 30
})

// 相关中间件 压缩响应文件 处理静态资源等
app.use(...)

// 设置缓存时间
const microCache = LRU({
  maxAge: 1000 * 60 * 1
})

const isCacheable = req => useMicroCache

function render (req, res) {
  const s = Date.now()

  res.setHeader('Content-Type', 'text/html')

  // 错误处理
  const handleError = err => {}
  // 根据path和query获取cacheKey
  let cacheKey = getCacheKey(req.path, req.query)
  // 生产环境下默认开启缓存
  const cacheable = isCacheable(req)
  if (cacheable) {
    const hit = microCache.get(cacheKey)
    if (hit) {
    // 从缓存中获取
      console.log(`cache hit! key: ${cacheKey} query: ${JSON.stringify(req.query)}`)
      return res.end(hit)
    }
  }
  // 设置请求的url
  const context = {
    title: '', 
    url: req.url,
  }
  // 将Vue实例渲染为字符串，传入上下文对象。
  renderer.renderToString(context, (err, html) => {
    if (err) {
      return handleError(err)
    }
    res.end(html)
    // 设置缓存
    if (cacheable) {
      if (!isProd) {
        console.log(`set cache, key: ${cacheKey}`)
      }
      microCache.set(cacheKey, html)
    }
    if (!isProd) {
      console.log(`whole request: ${Date.now() - s}ms`)
    }
  })
}

// 启动一个服务并监听8080端口
app.get('*', !isDev ? render : (req, res) => {
  readyPromise.then(() => render(req, res))
})

const port = process.env.PORT || 8080
const server = http.createServer(app)
server.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})

import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    const { url, req } = context
    const fullPath = router.resolve(url).route.fullPath

    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
	// 切换路由到请求的url
    router.push(url)

	 // 在路由完成初始导航时调用,可以解析所有的异步进入钩子和路由初始化相关联的异步组件,有效确保服务端渲染时服务端和客户端输出的一致。
    router.onReady(() => {
    // 获取该路由相匹配的Vue components
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        reject({ code: 404 })
      }
	 // 执行匹配组件中的asyncData
      Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
        store,
        route: router.currentRoute,
        req
      }))).then(() => {
        // 在所有预取钩子(preFetch hook) resolve 后，
        // 我们的 store 现在已经填充入渲染应用程序所需的状态。
        // 当我们将状态附加到上下文，
        // 并且 `template` 选项用于 renderer 时，
        // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
		  context.state = store.state
        if (router.currentRoute.meta) {
          context.title = router.currentRoute.meta.title
        }
        // 返回一个初始化完整的Vue实例
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

import 'es6-promise/auto'
import { createApp } from './app'

const { app, router, store } = createApp()

// 由于服务端渲染时，context.state 作为 window.__INITIAL_STATE__ 状态，自动嵌入到最终的 HTML 中。在客户端，在挂载到应用程序之前，state为window.__INITIAL_STATE__。
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
	// 添加路由钩子函数，用于处理 asyncData.
	// 在初始路由 resolve 后执行，
	// 以便我们不会二次预取(double-fetch)已有的数据。
	// 使用 `router.beforeResolve()`，以便确保所有异步组件都 resolve。  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)
    })
    const asyncDataHooks = activated.map(c => c.asyncData).filter(_ => _)
    if (!asyncDataHooks.length) {
      return next()
    }

    Promise.all(asyncDataHooks.map(hook => hook({ store, route: to })))
      .then(() => {
        next()
      })
      .catch(next)
  })

	// 挂载在DOM上
  app.$mount('#app')
})

// 解决移动端300ms延迟问题
if (typeof window !== "undefined") {
  const Fastclick = require('fastclick')
  Fastclick.attach(document.body)
}

import FastClick from 'fastclick'

FastClick.attach(document.body)

3. not matching