vue服务端渲染操作简单入门实例分析


Posted in Javascript onAugust 28, 2019

本文实例讲述了vue服务端渲染操作。分享给大家供大家参考,具体如下:

想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目。然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好。

话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!!

一,首先实现下官网的基本案例

随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json;创建server.js;然后按照vue-ssr官方链接:https://ssr.vuejs.org/zh/basic.html教程里面介绍的server.js,复制教程里面代码,如下

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
 const app = new Vue({
  data: {
   url: req.url
  },
  template: `<div>访问的 URL 是: {{ url }}</div>`
 })
 renderer.renderToString(app, (err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(`
   <!DOCTYPE html>
   <html lang="en">
    <head><title>Hello</title></head>
    <body>${html}</body>
   </html>
  `)
 })
})
server.listen(8080)

显然需要按照上面引入的依赖vue,express和vue-server-renderer,安装完毕,在终端执行,node server.js,打开浏览器,http://localhost:8080/,不出意外会是乱码,因为官网的返回的html字符串里面没有 <meta charset="utf-8">,而加上这个 就好了。

当然还可以引入一个模板文件,同样是官网的案例,此时的server.js为

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
 template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
 const app = new Vue({
  data: {
   url: req.url
  },
  template: `<div>访问的 URL 是: {{ url }}</div>`
 })
 renderer.renderToString(app, (err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(html)
 })
})
server.listen(8080)

模板文件index.template.html

<!DOCTYPE html>
<html lang="en">
 <head><title>Hello</title></head>
 <body>
   <!-- 下面这个注释必须有 -->
  <!--vue-ssr-outlet-->
 </body>
</html>

上面注释根据官网教程,是vue注入的位置标记。然后同样执行,node server.js就可以了。

是不是很简单,还可以创建一个对象来改变模板的标题和meta,这个时候的server.js和模板文件代码分别是

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer({
 template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
  const context = {
  title: 'hello',
  meta: `
  <meta ...>
  <meta ...>
 `,url:req.url
 }
 const app = new Vue({
  data: {
   url: req.url
  },
  template: `<div>访问的 URL 是: {{ url }}</div>`
 })
 renderer.renderToString(app, context,(err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(html)
 })
})
server.listen(8080)
<!DOCTYPE html>
<html lang="en">
 <head>
   <title>{{title}}</title>
   {{{meta}}}
 </head>
 <body>
   <!-- 下面这个注释必须有 -->
  <!--vue-ssr-outlet-->
 </body>
</html>

这里说下我的理解,vue服务端渲染实际是一套代码的两次应用,所谓的一套代码就是拿出server.js外面去的vm实例,上面之所以简单是因为我们在server内部创建的vm实例,一旦将vm拿出去,在server.js外部引入,那么涉及的就麻烦了。

这里分两条线说,一个是在server.js外面创建一个app.js;结果是无法引入到server中;而这个也不是关注的重点;

另一条线是使用vue-loader创建一个vm实例,然后引入到server中,整个vue渲染就在解决这个问题,解决引入的问题,解决引入之后与前端混合的问题。下面贴上简单案例的实现代码。

因为不能直接应用.vue文件以及外部的js文件,所以需要借助webpack,借助webpack将vue实例,转译为node可用代码,以及对前端代码进行转译。

二,以vue init webpack-simple vuessr0 为基础的vue-ssr案例

1)用vue-cli也就是vue脚手架建了一个简单模板,命令:vue init webpack-simple vuessr0,相信对此都比较熟悉,建好后的结构如下

vue服务端渲染操作简单入门实例分析

之后改造一下,创建几个文件app.js,entry-client.js,entry-server.js,创建build目录,删除自动生成的webpack.config.js文件,改之后的目录结构为

各个文件的作用,entry-server.js将vm实例,转译为node可用代码;

entry-client.js和传统前端处理一致。

vue服务端渲染操作简单入门实例分析

好吧,github链接地址为:https://github.com/mstzhen/vue-ssr;我实在有点懒了。

需要说明的是,webpack将一份文件打包为两份,前端入口文件的作用是挂载到id上面,后端入口文件以及后端文件负责注入。

首先安装依赖:npm install

然后依次

npm run build:client

npm run build:server

npm run dev

8080端口访问即可。

最后,本文只是对vue服务端官网最简单那个实例的实现。没有使用vue-router,没有vuex,更没有服务端数据请求。希望对正在学习vue服务端学习的小伙伴有所帮助。

错误之处,请指出。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
JS开发自己的类库实例分析
Aug 28 #Javascript
详解Vue 换肤方案验证
Aug 28 #Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 #Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 #Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 #Javascript
You might like
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php面向对象值单例模式
2016/05/03 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue移动端屏幕适配详解
2019/04/30 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
Python协程的用法和例子详解
2017/09/09 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python开头的coding设置方法
2019/08/08 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
重阳节登山活动方案
2014/02/03 职场文书
募捐倡议书
2014/04/14 职场文书
白鹤梁导游词
2015/02/06 职场文书
工地材料员岗位职责
2015/04/11 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Python集合set()使用的方法详解
2022/03/18 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL