1.边界

1.1.什么是SSR

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

1.2.客户端渲染和服务器端渲染的区别传统SPA模式

也就是客户端呈现的模式

Vue.js构建的应用默认有一个html模板页面，然后由webpack打包生成一堆js、css等资源文件。然后将其插入index.html，用户输入url来访问页面-首先获得一个html模板页面-然后异步请求服务器数据-获得服务器数据-将其呈现为本地页面-用户SSR模式

也就是说，服务器呈现模式

用户输入访问页面的url服务器接收请求-对应于请求的数据被呈现到网页-并返回给用户

1.3.为什么要使用SSR？

官方网站已经给出了ssr的好处，最有趣的两个优点如下：

有更好的SEO。因为搜索引擎的爬虫爬行工具可以直接查看完全渲染的页面。更快的内容时间)1.4。SSR原理

这是vue.js的官方SSR原理介绍图从这张图可以知道，我们需要通过Webpack打包生成两个捆绑文件：

浏览器的客户端捆绑包。类似于纯Vue前端项目Bundle，它由服务器SSR使用，不管你之前的项目是什么样的，一个json文件都是由vue-cli生成的。会有这个建设改造的过程。vue-server-renderer库将用于构建和转换，需要注意的是，Vue-server-renderer版本应该与Vue版本相同。

2.开始构建基于vue-cli3的SSR应用程序

了解了ssr的原理后，开始一步一步地构建自己的SSR应用程序

安装vue-cli3

vue-cli脚手架的全球安装

npminstall @ vue/CLI-g-registry=https://registry.npm.taobao.org创建vue项目

Vue create ssr-example将进入一个交互式bash界面，并根据您自己的需要进行选择

一步一步进入车内，根据自己的需求进行选择

运行项目

国家预防机制运行服务

看到这个提示，说明成功了一半，然后进行了后一半的改造。

3.SSR转化

3.1安装所需的软件包

安装vue-服务器-渲染器安装lodash.merge安装webpack-node-externals安装cross-env NPM安装vue-服务器-渲染器lodash。合并web pack-node-externals cross-Env-registry=https://registry . NPM . Taobao . org-save-dev 3.2集成在服务器中

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

安装koa2

Npm安装KOA KOA-静态-保存-注册=https://registry.npm.taobao.org在koa2中集成了ssr

//server.js//步骤1:创建一个Vue实例const Vue=require(' Vue ')；const Koa=require(' Koa ')；const app=new Koa()；//步骤2:创建渲染器const renderer=require(' vue-server-renderer ')。create renderer()；//第三步：添加一个中间件来处理所有的请求app.use (async (CTX，下一个)={ const VM=new vue({ data : { title : ' SSR example，url3360ctx.url})，template3360 ` div访问的url是：{ { URL } }//将Vue实例渲染为htmlrenderer.rendertostring (VM，(err，html)={if (err) {res.status (500))。end('内部服务器错误')返回} CTX . body=html })；});const port=3000app.listen(port，function(){ console . log(` server started at localhost : $ { port } `))；});运行server.js

node server . js

看到这一点表明一个简单的ssr被成功构建。

但到目前为止，我们还没有提交客户的。vue文件通过服务器，那么前端如何组合。vue文件与后端节点？

3.3转换前端配置以支持SSR

1.修改源代码结构

在src目录中创建了两个新文件，一个条目-client.js只在浏览器中运行，一个条目-server.js只在服务器中运行。修改main.jsmain.js是我们应用程序的“通用入口”。在一个纯客户端应用程序中，我们将在这个文件中创建一个根Vue实例，并将其直接挂载到DOM中。但是，对于服务器端呈现(SSR)，责任被转移到纯客户端条目文件。App.js只是使用export来导出一个createApp函数：

//main . jsimport Vue from ' Vue ' import App from '。/App.vue“从导入{ createRouter }”。/router '；//导出工厂函数以创建新的//应用程序、路由器和存储实例导出函数create app(){ construct out=create router()；Const app=new Vue({ router，//root instance简单呈现应用组件。Render:h=h (app)})返回{app}}修改条目-client.js

客户端条目只是创建应用程序并将其装入DOM

从“”导入{createApp}。/app//客户端特定的启动逻辑.……const { app }=createApp()///这里假设App.vue模板中的根元素有` id=' app' `app。$ mount(“# app”)修改条目-server.js

服务器入口使用默认导出来导出函数，并在每次渲染中重复调用该函数。

从“”导入{ createApp }。/main '；导出默认上下文={//因为它可能是一个异步路由钩子函数或组件，所以我们将返回一个Promise，//这样服务器就可以在渲染之前等待一切准备就绪。返回新的Promise((解析，拒绝)={ const { app，路由器，商店}=createApp()；//在服务器端设置路由器的位置：router . push(context . URL)；//等到路由器解析完可能的异步组件和钩子函数。router . onready(()={ const Matched Components=router . getmatched Components()；//执行拒绝函数并返回404 if(！matched Components . length){ return reject({ code : 404 })；} //Promise应该解析应用程序实例，以便它可以呈现resolve(app)；}，拒绝)；});};修改router.js

从“vue”导入vue从“Vue”导入路由器-路由器“从导入主页”。/view/home . vue ' vue . use(Router)导出函数createRouter(){返回新路由器({mode:' history '，//必须处于历史模式route: [{path:'/'，name:' home '，component3360 home}，{ path : '/' about '，name:' about '，component 3:()=import(/* webpackchunkname 3360 ' about ' */')。/观点/关于。vue')}]})} 2。修改webpack配置

在vue-cli3中创建的vue项目没有以前的webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf.js.那么如何配置webpack呢？

它还解释了如何在vue-cli官方网站上使用它。调整webpack配置最简单的方法是在vue.config.js中的configureWebpack选项中提供一个对象，该对象将通过webpack-merge合并到最终的Webpack配置中。

在项目根目录下，创建新的vue.config.js

//vue。配置。jsconst VueSSRServerPlugin=require(' vue-server-renderer/server-plugin ')；const VueSSRClientPlugin=require(' vue-服务器-渲染器/客户端-插件');const nodexternals=require(' web pack-node-externals ')；const merge=require(' lodash。合并')；const TARGET _ NODE=进程。环境。WEBSPACK _ TARGET===' NODEconst target=TARGET_NODE？服务器":"客户端；模块。exports={ configurewebpack k :()=({//将进入指向应用程序的服务器/客户端文件入口： `。/src/entry-${target}。js `,//对捆绑渲染器提供源地图支持devtool: '源-映射，target: TARGET_NODE？node' : 'web '，node: TARGET_NODE？undefined : false，输出： { library TARGET : TARGET _ NODE？commonjs2' : undefined }，//https://web pack . js . org/configuration/externals/# function///https://github.com/liady/web pack-node-externals//外置化应用程序依赖模块。可以使服务器构建速度更快， //并生成较小的捆文件外部s : nodexternal({//不要外置化工具需要处理的依赖模块。 //你可以在这里添加更多的文件类型。例如，未处理*.某视频剪辑软件原始文件， //你还应该将修改`全局`(例如polyfill)的依赖模块列入白名单白名单： [/。css$/] })，优化： { split chunk s 3360 { chunk s : ' async '，minSize: 30000，minChunks: 2，maxAsyncRequests: 5，maxInitialRequests: 3 } }，plugins: [TARGET_NODE？new VueSSRServerPlugin()(: new VueSSRClientPlugin()]})，chainweb pack k : config={ config。模块.规则(' vue ').使用(“vue-loader”).点击(options={ merge(options，{ optimizations r : false })；});}};修改包装，新增三个脚本来生成bundle.json

build : client ' : ' vue-CLI-service build '，' build : server ' : ' cross-env WEBPACK _ TARGET=node vue-CLI-service build '，' build : win ' : ' NPM run build : server move dist vue-SSR-server-bundle。JSON包NPM运行构建3:客户端移动包dist vue-SSR-服务器-包。JSON’(9504 . 163.com)

执行命令

新公共管理运行构建：win在距离目录下会生成两个数据文件

3.4 改造server.js代码

const fs=require(' fs ')；const Koa=require(' Koa ')；const path=require(' path ')；const Koastatic=require(' Koa-static ')const app=new Koa()；const resolve=file=路径。resolve(_ dirname，file)；//开放距离目录app.use(koaStatic(resolve(')./dist')))//第2步：获得一个createbundlerenderconst { createBundleRenderer }=require(' vue-server-renderer ')；const bundle=require(' ./dist/vue-SSR-服务器-捆绑包。JSON’)；const clientManifest=require(' ./dist/vue-SSR-客户端-清单。JSON’)；const renderer=createBundleRenderer(bundle，{ runInNewContext: false，template : fs。readfilesync(resolve(')./src/index.temp.html ')，' utf-8 ')，客户端清单：客户端清单})；函数renderToString(上下文){ 0返回新的承诺(解析，拒绝)={渲染器。renderToString(上下文)，(err，html)={ err？拒绝(错误):解析(html)；});});}//第3步：添加一个中间件来处理所有请求app.use(async (ctx，next)={ const context={ title : ' SSR test '，URL : CTX。URL }；//将语境数据渲染为HTML常量HTML=等待renderToString(上下文);CTX . body=html })；const port=3000app.listen(端口，函数(){ console。日志(`服务器启动于localhost : $ { port } `))；});3.5 运行server.js

node server.js访问localhost:3000，可以看到页面的数据都是又服务端渲染完成后返回的。到这一步已经基本算完成了苏维埃社会主义共和国的构建了。

如果有问题的话，可以把距离目录下的index.html文件删了。避免直接访问到了该超文本标记语言文件。

4、集成状态管理

修改store.js

从vue '导入某视频剪辑软件从vuex '导入Vuex。使用(Vuex)导出函数createStore(){ 0返回新的Vuex .Store({ state: { }，mutations: { }，actions : { })；}修改main.js

从“Vue”导入Vue；从“”导入应用程序。/app . vue '；从“@/router”导入{ createRouter }；从“@/store”导入{ CreateStore }；导出函数createApp(){ const router=createRouter()；const store=createStore()//const App=new Vue({路由器，存储，//render :h=h(App)})；返回{ app，路由器}；}再次运行脚本构建

Npm运行构建： winnodeserver.js5，案例代码

附上案例源代码。https://github.com/lentoo/vue-cli-ssr-example欢迎明星

6.摘要

到目前为止，只完成了SSR的基础部分，SSR热更新等一些相关问题还需要进一步探索。如果有好的热更新方法，请发出参考。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。