vue服务端渲染分享交流.pptx

Vue服务端渲染分享交流会概念这里的渲染，就是指生成html文档的过程，和浏览器渲染html没有关系。浏览器端渲染，指的是用js去生成html，前端做路由。举例：React, Vue等等前端框架。适合单页面应用程序。服务器端渲染，指的是用后台语言通过一些模版引擎生成html。举例：PHP文件、JSP文件、Python的Flask配合Jinja引擎、Django框架、Java配合vm模版引擎、NodeJS配合Jade。适合多页面应用。其实现在大部分网站还是这种形式。所以有为了让单页面应用利于SEO，让服务器和客户端同构，也使用React/Vue渲染的方案服务端渲染解决的问题1.SEO2.初次加载耗时较多的问题Vue2.0与服务端渲染Vue2.0在服务端创建了虚拟DOM，因此可以在服务端可以提前渲染出来，解决了单页面一直存在的问题：SEO和初次加载耗时较多的问题。同时在真正意义上做到了前后端共用一套代码SSR的实现原理客户端请求服务器，服务器根据请求地址获得匹配的组件，在调用匹配到的组件返回 Promise (官方是preFetch方法)来将需要的数据拿到。最后再通过scriptwindow.__initial_state=data/script ?将其写入网页，最后将服务端渲染好的网页返回回去。接下来客户端会将vuex将写入的 __initial_state__ 替换为当前的全局状态树，再用这个状态树去检查服务端渲染好的数据有没有问题。遇到没被服务端渲染的组件，再去发异步请求拿数据。说白了就是一个类似React的 shouldComponentUpdate 的Diff操作。Vue2使用的是单向数据流，用了它，就可以通过 SSR 返回唯一一个全局状态， 并确认某个组件是否已经SSR过了。Vue服务端渲染流程图第一步:Vue 服务端渲染项目搭建流程1.使用vue-cli搭建基础项目，生成的目录结构如下图所示Vue 客户端渲染的几个主要配置文件第二步:删除客户端渲染的配置文件第三步拷贝官网示例的配置文件第四步:修改配置文件1.修改webpack.base.config.js文件，删除firebase先关的配置(暂时用不到)第五步:修改webpack.client.config.js配置文件第六步:修改package.json文件参照官网示例修改配置文件，主要修改的内容参照下图第七步:删除main.js,拷贝app.js第八步:拷贝filter目录第十步:新建store目录，实例化状态管理器第11步:修改router目录下的index.js第12步:在hello.vue中新增preFetch方法编译并启动项目npm run buildnpm run start性能优化路由按需加载创建服务器端缓存创建组件缓存参考网址:/article/58675ac9f30d0a64156cb549新建api目录修改webpack.client.config.js添加这两项配置修改webpack.server.config.js修改package.json添加两个依赖插件添加vue组件和store的actions等修改router.js文件服务端渲染涉及的几个重要的配置文件package.jsonwebpack.client.config.jswebpack.server.config.jswebpack.base.config.jsentry-client.jsentry-server.jsserver.jsindex.html(或者index.template.html)setup-dev-server.js修改package.json配置文件pacakage.json：主要变化:主要是启动项的变化，主要执行1.scripts选项变化:启动server.js2.depedencies:主要是添加vue-server-renderer插件webpack.client.config.js 配置配置文件中主要工作:合并基础的webpack配置配置webpack的输出配置webpack插件配置文件中有一项server-work插件的配置，稍后详细说一下，也是这次我研究ssr服务端渲染的一个坑。(生产环境用到这个插件)webpack.server.config.js配置:配置文件中基础工作如下:合并基础的webpack配置配置入口文件为(entry-server.js)3.配置webpack的输出4.配置webpack插件刚才说了webpack.server.config.js和webpack.client.config.js都涉及合并基础的webpack配置，就是指的合并(webpack.base.config.js),?webapck.base.confi