通过vue-cli3构建一个SSR应用程序的方法 - 行业资讯 - 肥雀云

<强> 1.1,什么是SSR
　　

SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示。

<强> 1.2,客户端渲染与服务端渲染的区别传统的SPA模式

即客户端渲染的模式

　　<李> Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js, css等等资源文件。然后塞到index . html中李　　<李>用户输入url访问页面→先得到一个html模板页→然后通过异步请求服务端数据→得到服务端的数据→渲染成局部页面→李用户　　　　

<强> SSR模式

即服务端渲染模式

用户输入url访问页面→服务端接收到请求→将对应请求的数据渲染完一个网页→返回给用户

, <强> 1.3,为什么要使用SSR呢?

ssr的好处官网已经给出,最有意思的两个优点如下:

　　<李>更有好的SEO。由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。　　<李>更快的内容到达时间(time-to-content) 　　　　

<强> 1.4,SSR原理

这是vue.js官方的SSR原理介绍图,从这张图片,我们可以知道:我们需要通过Webpack打包生成两份包文件:

　　<李>客户端包,给浏览器用。和纯Vue前端项目包类似李　　<李>服务器包,供服务端SSR使用,一个json文件　　　　

不管你项目先前是什么样子,是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到vue-server-renderer库,这里要注意的是vue-server-renderer版本要与Vue版本一样。

<人物> 　　npm安装@vue/cli - g -注册表=https://registry.npm.taobao.org 　　　　

创建一个vue项目

　　　　　　vue创建ssr-example 　　　　

会进入到一个交互bash界面,按自己需要选择

<人物> 通过vue-cli3构建一个SSR应用程序的方法

一步一步回车,根据自己需要选择

运行项目

　　　　　　npm运行服务　　　　

<人物> 通过vue-cli3构建一个SSR应用程序的方法

看到这个提示,说明成功了一半了,接下来进行后一半的改造。

<强> 3.1安装需要的包

　　<李>安装vue-server-renderer李　　<李>安装lodash.merge李　　<李>安装webpack-node-externals李　　<李>安装cross-env李　　　　　　　　npm安装vue-server-renderer lodash。合并webpack-node-externals cross-env——注册表=https://registry.npm.taobao.org save-dev 　　　　

<强> 3.2在服务器中集成

在项目根目录下新建一个server.js

安装koa2 　　　　　　npm安装高雅koa-static——保存注册表=https://registry.npm.taobao.org 　　　　

在koa2集成ssr

　　　　//server.js//第1步:创建一个Vue实例　　const Vue=要求(“Vue”); 　　　　const高雅=要求(“高雅”); 　　const应用=new高雅();//第2步:创建一个渲染器　　const渲染器=要求(“vue-server-renderer”) .createRenderer ();//第3步:添加一个中间件来处理所有请求　　接下来app.use(异步(ctx)=比;{ 　　const vm=new Vue ({ 　　数据:{ 　　标题:“苏维埃社会主义共和国的例子”, 　　url: ctx.url 　　}，　　模板:“& lt; div>访问的URL是:{{URL}} & lt;/div>” 　　}）;//将Vue实例渲染为HTML 　　渲染器。(呃,html renderToString (vm)=比;{ 　　如果(err) { 　　res.status (500)。结束(“内部服务器错误”) 　　返回　　｝　　ctx。身体=html 　　}）; 　　}）; 　　　　const端口=3000; 　　app.listen(港口,函数(){ 　　控制台。日志(“服务器开始在localhost: ${港口}'); 　　}); 　　　　

运行server.js 　　　　　　节点server.js