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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
(仅IE下有效)关于checkbox 三态
May 12 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
JS 基本概念详细介绍
Oct 16 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
常用的php对象类型判断
2008/08/27 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python Flask实现restful api service
2017/12/04 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
python开发入门——列表生成式
2020/09/03 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
文化与传播毕业生求职信
2014/03/09 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年居委会工作总结
2014/12/09 职场文书
教师年终个人总结
2015/02/11 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
POST提交数据常见的四种方式
2022/01/18 HTML / CSS