vue如何实现服务器渲染

1、 什么是服务器端渲染

客户端请求服务器。服务器根据请求地址获取匹配的组件。调用匹配的组件后，它返回Promise（官方的异步数据方法）以获取所需的数据。最后，通过window__initial_State=data将其写入网页，最后返回服务器呈现的网页。接下来，客户端将用新的存储状态替换原始存储状态，以确保客户端和服务器之间的数据同步。当遇到服务器尚未呈现的组件时，发送异步请求以获取数据。

设置服务器渲染环境

这是vue官网上服务器端渲染的示意图。ssr有两个条目文件，客户端的条目文件和服务器的条目文件。webpack通过两个条目文件打包服务器端的服务器捆绑包和客户端的客户端捆绑包。当服务器从客户端接收到请求时，它将创建一个渲染器bundleRenderer。bundleRender将读取上面生成的服务器包文件，执行其代码，然后将生成的html发送到浏览器。客户端加载客户端包后，它将与服务器生成的DOM混合（判断该DOM是否与自己生成的DOM相同，如果相同，则将客户端的vue实例安装到该DOM）

实施步骤：

1.创建vue实例（main.js）

importVuefrom'vue'importAppfrom'。/app。vue'importiViewfrom'iviview'；从“./”导入｛createStore｝存储“import｛createRouter｝from”。/router从“vuex router sync”Vue导入｛sync｝。使用（iView）；导出函数createApp（）｛conststore=createStore（）constouter=createRouter（）sync（store，router）constapp=newVue（｛route，store，render:

2.服务器门户文件（entry-Server.js）

从“./”导入｛createApp｝main'组成Dev=；进程.env。节点_环境！==##39; production‘const｛app，router，store｝=；createApp（）constgetAllAsyncData=函数（组件）｛letstores=[]functionloopComponent（组件）{if（typeofcomponent.asyncData！=='undefined'）｛for（letaofcomponent.asyncData（｛store，route:router.currentRoute｝）））｛stores.push（a）｝｝if（typeof component.components！=='undefined‘）｛for（letcincomponent.component.components）｛loopComp（component[c]）｝returnstores｝export defaultcontext=>； ；｛return newPromise（（resolve，reject）=>｛consts=isDev&&Date.now（）const｛url｝=；上下文约束路径=；router.resolve（url）.route。fullPathif（fullPath！==url）｛reject（｛url:fullPath｝）｝router.push（url）router。onReady（（）=>； ；｛constmatchedComponents=router.getMatchedComponents（）if（！matchedCComponents.length）｛reject（｛代码：404｝）｝letallAsyncData=；getAllAsyncData（matchedComponents[0]）Promise.all（allAsyncData）。则（（）=>； ；｛isDev&&console.log（`数据预取：${Date.now（）-s｝ms`）上下文。状态=；百货商店stateresolve（app）}）。捕获（拒绝）}、拒绝）}。

存储的功能。状态是将服务器获得的数据装载到上下文对象。稍后，在服务器中。js文件，数据将直接发送到浏览器和客户端的vue实例，以进行数据（状态）同步。

3.客户端入口文件（entry-Client.js）

importVuefrom“vue”import“es6 promise/auto”import｛createApp｝from“。/main“importProgressBarfrom”。/组件/ProgressBar。vue'//；全局进度条形图=；Vue.原型.$bar