入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR)。
SSR,英文全称叫 Server side rendering ,国人叫它服务器端渲染。
首先听到这个名词,我头脑就有点眩晕。咱们还是先去官网了解下SSR的定义:
Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序,也可以叫做“同构”。
我弱弱地问了leader一句,咱们公司为什么要使用服务端渲染?
leader冷冷地回复,有两点原因,第一点,因为我们公司的站点很注重SEO,页面又是异步获取内容;第二点,同时也希望用户更快速地看到完整渲染的页面,从而提高用户体验。基于这两点,所以需要服务器端渲染(SSR)来解决这些问题。
那服务端渲染的流程究竟是怎样的呢?话不多说,先上图:
在使用服务端渲染的时候,首先要有个server端。因为在开发vue项目时,需要起一个webpack-dev-server的服务,端口8000。因为我们要使用它的热更替,这样能加快开发效率。
由于webpack是一个自主的server,我们没有办法在里面添加服务端渲染的代码,而这段代码是需要自己去写的,所以需要再起一个node server,去执行服务端渲染的逻辑。我们会用到vue-server-renderer这个包来帮我们在node.js环境里面去渲染出vue代码生成的HTML代码,这部分代码是直接返回给用户的,用户可以在浏览器里直接看到HTML的内容。
以图为例,我们看到两个渲染的过程,两种server。如果直接访问webpack-dev-server,就跟我们之前开发的过程一样,它是一个纯前端渲染的过程。如果我们要走服务端渲染的流程,就要走node server服务,端口3333以示区别。而且需要打包一个逻辑到node端运行,通过webpack-server-compiler去生成一个server bundle,也就是服务端的app.js。 当node server 获取到server bundle之后,就可以执行vue-server-renderer,去渲染出HTML的代码,直接返回给用户,这样的话就不需要通过js再去渲染出页面内容,减少了用户的等待时间。
今天这篇文章的主要任务是,先用webpack创建一个配置文件来打包server端的代码。
入门第一步,如何编写服务器端渲染的配置文件?
首先我们需要在项目根目录里面找到build文件夹,然后在其下面新建一个webpack.config.server.js文件,具体配置代码,我先撸为敬:
const path = require('path') const ExtractPlugin = require('extract-text-webpack-plugin') const webpack = require('webpack') const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') const VueServerPlugin = require('vue-server-renderer/server-plugin') let config config = merge(baseConfig, { target: 'node', entry: path.join(__dirname, '../client/server-entry.js'), devtool: 'source-map', output: { libraryTarget: 'commonjs2', filename: 'server-entry.js', path: path.join(__dirname, '../server-build') }, externals: Object.keys(require('../package.json').dependencies), module: { rules: [ { test: /\.styl/, use: ExtractPlugin.extract({ fallback: 'vue-style-loader', use: [ 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }, 'stylus-loader' ] }) } ] }, plugins: [ new ExtractPlugin('styles.[contentHash:8].css'), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.VUE_ENV': '"server"' }), new VueServerPlugin() ] }) module.exports = config
刚接触SSR的童鞋,看完以上代码是不是感觉有点晕?别着急,我来带大家一一分析下。
target: 'node',
target需要指定为node,因为打包出来的程序是在node端运行的,不是在浏览器端运行,所以要指定打包的目标是node环境。
entry: path.join(__dirname, '../client/server-entry.js'),
entry需要提供一个单独的入口文件,所以需要在client文件夹下新建一个server-entry.js文件。
devtool: 'source-map',
devtool需要指定source-map,因为vue-server-renderer有个webpack插件,它能提供代码调试的功能,不过只能提示到出错的文件出在哪一行。
libraryTarget: 'commonjs2',
指定libraryTarget的类型为commonjs2,用来指定代码export出去的入口的形式。在node.js中模块是module.exports = {...},commonjs2打包出来的代码出口形式就类似于此。
externals: Object.keys(require('../package.json').dependencies),
externals是外部因素的意思,首先我们可以打开package.json文件看看dependencies
我们用Object.keys()得到的就是一个数组。externals就是告诉webpack不要去打包node_modules里面的js代码。devDependencies里面是一些工具型的东西,在应用真正跑起来的时候是不需要的。只有在执行一些打包,工具化操作的时候才会需要它。
'process.env.VUE_ENV': '"server"'
这是vue服务端官方建议我们这么去做的,在vue-server-renderer里面可能会用到这个属性。
const VueServerPlugin = require('vue-server-renderer/server-plugin')
这个插件能帮我们单独地生成一个json文件,用于在vue的服务端渲染里面能帮助我们处理一些很复杂的逻辑。
最后
文章写到这儿,Vue的服务端渲染的入门工作就算完成了(先用webpack创建一个配置文件来打包server端的代码),下一篇文章将介绍如何使用koa这个node服务端框架去实现node server,最新文章都会第一时间更新在我的公众号<闰土大叔>里面,欢迎关注。
入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)的更多相关文章
- 入职第一天,装环境 .Ubuntu装jdk1.8,装idea 及tomcat
入职第一天,和之前公司的开发环境感觉天壤之别了,不过万变不离其宗,之前公司eclipse+widows.所以很少玩linux了.今天来就干了一件事.装环境 jdk安装. 下载地址:https://ww ...
- 入职第一个项目bug总结-2018/07/28
此项目是正式入职后的第一个项目,可能各种原因重重,导致测试提出了如此多的bug,关于那些因为需求不清楚而导致的就不说了,bug总结如下: 一.ElementUI table组件出现横向滚动条 原因:因 ...
- 手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
- 手把手教你入门mac idea
一.前沿 去年入职后, 公司有很多人使用的是idea , 而不是eclipse. 之前就想转向idea, 但一直没转过来~~原因是团队的人提倡用开源eclipse.现在下定决心转向idea. 虽然, ...
- 手把手教你写 Vue UI 组件库
最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好. 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox ...
- 手把手教你用Vue造轮子(3):开发可排序的表格组件
前言 最近闰土大叔跟Vue干上了,没办法,公司业务驱动,不用Vue没招啊,leader尝到了前后端分离带来的好处,除非你离职,哈哈哈,当然,那是不可能的,对于我这种要攒钱买房子的人来说.那还说什么呢, ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 手把手教你搭建 vue 环境
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
随机推荐
- 如何使用EasyUI显示表格界面
还记得前面有篇博客叫---使用TT模板+mvc+wcf实现简单查询,这篇博文的末尾,小编贴了一张查询出来的结果图,那么这篇博客的中新来了,如何使用EasyUI显示出表格样式的界面,以前学习CS的时候, ...
- 如何正确的理解和解决 ORA-01843:not a valid month
今天码代码的时候遇到了这个问题,因为oracle用的比较少,所在查询了一下. 顿时傻眼,有很多的贴子说是因为nls_date_language的问题,还要改会话级的NLS_DATE_LANGUAGE设 ...
- (NO.00005)iOS实现炸弹人游戏(二):素材选择的取舍
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 前面一篇里我们基本明确了游戏的大致玩法和特点.下面就游戏中会用到 ...
- J2EE进阶(五)Spring在web.xml中的配置
J2EE进阶(五)Spring在web.xml中的配置 前言 在实际项目中spring的配置文件applicationcontext.xml是通过spring提供的加载机制自动加载到容器中.在web ...
- Ubuntu15.10下制作Linux 操作系统优盘启动盘
上次电脑出现了一些问题,于是不得不重新装机了.下面就跟大家分享一下我在Ubuntu下制作优盘启动盘的一些心得. 准备原料 我这里用到的是 镜像文件是:debian-8.3.0-amd64-DVD-2. ...
- ROS(indigo)一个简单灵活和可扩展的2D多机器人仿真器stdr_simulator
官方网址:http://wiki.ros.org/stdr_simulator 教程非常详细,参考即可.这里引用一张架构图.hydro,indigo,jade,kinetic均可用. 可以使用Qt编译 ...
- UE4利用Save Game创建全局变量
因为盲目的做了一个UE4的项目,没有用到UE4的无缝加载,我只能在一个个关卡中手动切换,然后每次的数据都会重置,这对于项目来说,造成了体验感的极度下降. 然而我查了一下怎样在UE4中创建全局变量,找到 ...
- 数据库隔离级别(mysql+Spring)与性能分析
数据库隔离级别与Spring配置事务的联系及性能影响,以下是个人理解,如果有瑕疵请及时指正. 这里以mysql为例,先明确以下几个问题: 一.一般项目如果不自己配置事务的话,一般默认的是au ...
- 使用dom4j技术对xml文档进行增删改练习(一)
整个流程如下面代码所以,并对一些重要代码意义做出详细解释: import java.io.File; import java.io.FileOutputStream; import org.dom4j ...
- 谈谈Ext JS的组件——容器与布局
概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...