vue是什么 vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
, <强>服务端渲染
, <强>服务端渲染和单页面渲染区别
查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的html结构。而单页面是一些脚本标签引入的js文件,最终将虚拟dom去挂在到<代码> #应用容器上。
yarn global add @vue/cli
步骤2添加服务端文件
启动一个web服务下方代码中<代码> http://localhost: 9000> const Koa =,需要(& # 39;洋槐# 39;)
const path =,要求(& # 39;path & # 39;)
const resolve =, file =祝辞,path.resolve (__dirname,文件)
const app =, new 高雅()
const router =,要求(& # 39;。/路由器# 39;)
const port =9000
app.listen(港口,,(),=祝辞,{
,console.log (“server started at localhost: ${港口}’)
})
时间=module.exports 应用 这里只是启动了服务,我们需要在去读取服务端和客户端到文件,下面代码就是服务端渲染的关键步骤
const fs =,需要(& # 39;fs # 39;)
const path =,要求(& # 39;path & # 39;)
const send =,要求(& # 39;koa-send& # 39;)
const Router =,要求(& # 39;koa-router& # 39;)
const router =, new 路由器()//,获取当前文件的绝对路径
const resolve =, file =祝辞,path.resolve (__dirname,文件)
{const createBundleRenderer },=,要求(& # 39;vue-server-renderer& # 39;)
const bundle =,要求(& # 39;. ./dist/vue-ssr-server-bundle.json& # 39;)
const clientManifest =,要求(& # 39;. ./dist/vue-ssr-client-manifest.json& # 39;)//,创建一个,BunleRender 实例用于,renderer.renderToString 将,bundle 渲染为字符串
const renderer =, createBundleRenderer(包,,{
,runInNewContext:假的,
,模板:fs.readFileSync(解决(& # 39;. ./src/index.temp.html& # 39;),, & # 39; utf - 8 # 39;),
,clientManifest: clientManifest
})
const handleRequest =, async ctx =祝辞,{
,ctx.res.setHeader(& # 39;内容类型# 39;,,& # 39;text/html # 39;)
,//在,2.5.0 +,版本中,此,callback 回调函数是可选项。在不传递,callback 时,此方法返回一个,Promise 对象,在其,resolve 后返回最终渲染的,HTML。=,,ctx.body await renderer.renderToString (Object.assign ({},, ctx.state.deliver,, {, url }))
}
router.get(& # 39;/回家# 39;,handleRequest)
路由器module.exports =, <代码> vue-server-render> const {, createBundleRenderer },=,要求(& # 39;vue-server-renderer& # 39;)
const renderer =, createBundleRenderer (serverBundle, {
,runInNewContext:假的,,//,推荐
,模板,//,(可选)页面模板
,clientManifest //,(可选)客户端构建,清单
}) 通过上面的createBundleRenderer方法生产渲染对象最终将bunlde渲染为字符串,将最终的html返回给客户端。
bundleRenderer.renderToString([上下文,回调]):,? Promise <强> step3添加entry-client.js,输入服务器。js入口文件
在src中除了这两个入口文件,其他的文件都是在客户端和服务端公用的。来看下这两个入口文件中分别干了什么。
大体的流程就是:服务端创建vue实例,将页面中的异步请求的数据拿到存储在容器中——比;客户端接收到服务端发送的html以激活模式进行挂载,自动给根元素#应用上添加
