|
副问题[/!--empirenews.page--]
跟着各大前端框架的降生和演变，SPA开始风行，单页面应用的上风在于可以不从头加载整个页面的环境下，通过ajax和处事器通讯，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对付必要SEO、追求极致的首屏机能的应用，前端渲染的SPA是糟糕的。亏得Vue 2.0后是支持处事端渲染的，零零分离耗费了两三周变乱，通过改革现有项目，根基完成了在现有项目中实践了Vue处事端渲染。
关于Vue处事端渲染的道理、搭建，官方文档已经讲的较量具体了，因此，本文不是剽窃文档，而是文档的增补。出格是对付怎样与现有项目举办很好的团结，照旧必要费很大工夫的。本文首要对我地址的项目中举办Vue处事端渲染的改革进程举办叙述，加上一些小我私人的领略，作为分享与进修。
概述
本文首要分以下几个方面：
- 什么是处事端渲染？处事端渲染的道理是什么？
- 如安在基于Koa的Web Server Frame上设置处事端渲染？
- 怎样对现有项目举办改革？
- 根基目次改革；
- 在处事端用vue-router支解代码；
- 在处事端预拉取数据；
- 客户端托管全局状态；
- 常见题目的办理方案；
什么是处事端渲染？处事端渲染的道理是什么？
Vue.js是构建客户端应用措施的框架。默认环境下，可以在赏识器中输出Vue组件，举办天生DOM和操纵DOM。然而，也可以将统一个组件渲染为处事器端的HTML字符串，将它们直接发送到赏识器，最后将这些静态标志"激活"为客户端上完全可交互的应用措施。
上面这段话是源自Vue处事端渲染文档的表明，用普通的话来说，或容许以这么领略：
- 处事端渲染的目标是：机能上风。 在处事端天生对应的HTML字符串，客户端吸取到对应的HTML字符串，能当即渲染DOM，最高效的首屏耗时。另外，因为处事端直接天生了对应的HTML字符串，对SEO也很是友爱；
- 处事端渲染的本质是：天生应用措施的“快照”。将Vue及对应库运行在处事端，此时，Web Server Frame现实上是作为署理处事器去会见接口处事器来预拉取数据，从而将拉取到的数据作为Vue组件的初始状态。
- 处事端渲染的道理是：假造DOM。在Web Server Frame作为署理处事器去会见接口处事器来预拉取数据后，这是处事端初始化组件必要用到的数据，从此，组件的beforeCreate和created生命周期会在处事端挪用，初始化对应的组件后，Vue启用假造DOM形成初始化的HTML字符串。之后，交由客户端托管。实现前后端同构应用。
如安在基于Koa的Web Server Frame上设置处事端渲染？
根基用法
必要用到Vue处事端渲染对应库vue-server-renderer，通过npm安装：
- npm install vue vue-server-renderer --save
最简朴的，起首渲染一个Vue实例：
- // 第 1 步：建设一个 Vue 实例
- const Vue = require('vue');
- const app = new Vue({
- template: `<div>Hello World</div>`
- });
- // 第 2 步：建设一个 renderer
- const renderer = require('vue-server-renderer').createRenderer();
- // 第 3 步：将 Vue 实例渲染为 HTML
- renderer.renderToString(app, (err, html) => {
- if (err) {
- throw err;
- }
- console.log(html);
- // => <div data-server-rendered="true">Hello World</div>
- });
与处事器集成：
- module.exports = async function(ctx) {
- ctx.status = 200;
- let html = '';
- try {
- // ...
- html = await renderer.renderToString(app, ctx);
- } catch (err) {
- ctx.logger('Vue SSR Render error', JSON.stringify(err));
- html = await ctx.getErrorPage(err); // 渲染堕落的页面
- }
- ctx.body = html;
- }
行使页面模板：
当你在渲染Vue应用措施时，renderer只从应用措施天生HTML标志。在这个示例中，我们必需用一个特另外HTML页面包裹容器，来包裹天生的HTML标志。
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
