vue ssr 深入踩坑

[xtx1130]

之前写过一篇初探踩坑，主要是生产环境的配置，今天我们主要讲的是koa+vue ssr 的hmr配置

开发环境

开发环境为：koa+vue+webpack+bootstrap-vue
这个时候，坑来了：目前看到的官方关于vue ssr的例子基本都是express+webpack-dev-middleware+webpack-hot-middleware的。而koa和express的中间件机制和参数不一样，所以如果想要拿来主义的话，是没有办法直接用的。由于这个原因，koa-webpack诞生了。koa-webpack集成了webpack-dev-middleware以及webpack-hot-middleware，并可以吐出koa的中间件。

koa-webpack

koa-webpack 集成了两个插件，那么就会又有新的问题：如果这两个插件任何之一出现问题，那么整个插件都不会运行，而且koa-webpack是由个人维护的插件。最终我用的是：koa-webpack 5.1.0 + webpack 4.17.2

webpack编译

由于vue-ssr会生成两个json文件，所以在做hmr的时候需要产出这两个json，这种时候必须要做好错误处理工作，否则的话连哪里编译错了都不知道，而错误处理主要就是判断回调参数的error:stats.errors.length，如果有的话，直接stats.errors.join('/r/n')输出吧！绝对没错的

dev模式promise的使用

由于webpack产出vue-ssr-*.json的过程是异步的，所以需要有一个简单的控制器，来控制所有编译完成：

  // 改造自vue官方ssr-demo
  let ready
  const readyPromise = new Promise((resolve, reject) => { ready = resolve })
  const update = () => {
    if (bundle && clientManifest && template) {
      ready()
      cb(bundle, {
        template,
        clientManifest
      })
    }
  }

而在webpack编译过程中会给koa插入中间件，所以，koa的listen也必须要在webpack产出之后：

if (isDev) { 
    readyPromise.then(() => app.listen('8011')) 
  } else { 
    app.listen('8011')
  }

webpack-dev-middleware 产出

不知道为什么，在使用koa-webpack的时候，hmr总是无法读出静态资源文件。所以后来用了一个比较yd的办法，修改了一下devMiddleware的配置，设置为writeToDisk: true。直接把改动写入到磁盘中，这样能保证koa的静态资源中间件肯定可以读到资源，也就无需去底层排查webpack-dev-middleware的产出和webpack-hot-client的问题了。

大致问题都列出来了，如果读者在使用koa做vue-ssr hmr的时候遇到了问题，或者有更好的办法，可以直接在issue下面回复，毕竟作者对这块也涉猎尚浅。

[xtx1130]

遇坑1：vue 组件名尽量不要和路由重名，名字一样大小写不一样也不可（例如 组件叫component，而引用这个组建的路由叫/Component）。如果重名了，会出现路由找不到的情况

[xtx1130]

遇坑2： 一定要遵守标签的嵌套规则，尤其是<router-link>不要单独使用tag="li"属性，嵌套规则的不一致会造成client和server两端的dom树不一致，导致本地开发没问题而打包上线有问题