vue ssr 初探踩坑

[xtx1130]

最近在做一个demo，由于公司项目整体是vue，所以这个demo就准备用vue ssr 来做，这篇文章主要针对vue ssr 小白，大神们可以直接忽视之。当然个人还是不建议直接上手就撸ssr,git上有很多开源的框架可以使用，也会让你事半功倍

个人开发中遇到的问题

心血来潮，蹚了一下vue ssr。按照官网的步骤一步一步来的，那么问题来了：

• 官网的步骤并没有完整的webpack配置文件，于是需要化身webpack配置工程师，配置好的config链接如下：
  webpack.client.js
  webpack.server.js
  如果有需要的同学，可以直接复制粘贴拿去用了，需要注意一点：这是webpack4的配置，一定看好你的webpack版本。

• 配置搞定，在编译的时候你可能会遇到一个问题：
  
  url-loader的问题，这种情况，需要你手动npm install file-loader -D

• 一般没有语法错误的话，编译应该是可以成功的，接下来问题又来了，你的页面很有可能渲染不出来。构建产出为json文件的时候，一定记得要通过renderer.createBundleRenderer来构建页面，而不是renderer. createRenderer

• 记得在使用renderToString 方法时候，在传context时，一定要记得把context.url传进去，不然的话页面路由和vue-router的路由无法匹配到一起，页面自然也不会渲染。

最后奉上项目链接：vue-ssr-demo。按照里面readme文档的方法就可以直接在本地跑起来。