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 相关文章推荐
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
浅谈对于“不用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
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
django删除表重建的实现方法
2019/08/28 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
高一物理教学反思
2014/01/24 职场文书
党员教师工作决心书
2014/03/13 职场文书
婚前保证书
2014/04/29 职场文书
经营理念标语
2014/06/21 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
教师个人教学总结
2015/02/11 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android