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().end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen()
显然需要按照上面引入的依赖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().end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen()
模板文件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().end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen()
<!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，相信对此都比较熟悉，建好后的结构如下
之后改造一下，创建几个文件app.js,entry-client.js,entry-server.js,创建build目录，删除自动生成的webpack.config.js文件，改之后的目录结构为
各个文件的作用，entry-server.js将vm实例，转译为node可用代码；
entry-client.js和传统前端处理一致。
好吧，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服务端学习的小伙伴有所帮助。
错误之处，请指出。
vue服务端渲染简单入门实例的更多相关文章
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- [vue] vue服务端渲染nuxt.js
初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...
- 解析Nuxt.js Vue服务端渲染摸索
本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单 ...
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
- vue服务端渲染提取css
vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Nuxt.js vue服务端渲染
一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...
随机推荐
- 分治与递归-找k个临近中位数的数
问题描述:给定由n个互不相同的数组成的集合S以及正整数k≤n,试设计一个O(n)时间算法找出S中最接近S的中位数的k个数. 算法描述: 用线性时间选择实现的算法找到中位数 S’=除去中位数外的S S& ...
- 批量改变图片的尺寸大小 python opencv
我目标文件夹下有一大批图片,我要把它转变为指定尺寸大小的图片,用pthon和opencv实现的. 以上为原图片. import cv2 import os # 按指定图像大小调整尺寸 def resi ...
- Tensorflow取消占用全部GPU
参考:https://www.cnblogs.com/jiu0821/p/9501665.html Tensorflow默认是会占用全部的GPU,而有时候你根本不需要那么占用那么多GPU资源,这时候就 ...
- java 学习知识汇总
一:常见模式与工具 学习Java技术体系,设计模式,流行的框架与组件是必不可少的: 常见的设计模式,编码必备 Spring5,做应用必不可少的最新框架 MyBatis,玩数据库必不可少的组件 二:工程 ...
- java四种访问权限
java有四种访问权限,它们各自的范围如下图所示 当下列访问修饰符修饰字段和方法时: private 任意位置的子类不可以访问从父类继承的private字段和方法.这里所说的访问包括通过super关键 ...
- python 的 购物小程序
money = input('请输入您的工资:') shop = [("iphone",5800),("ipod",3000),("book" ...
- java入门---基本数据类型之内置数据类型
变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间.内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义不同类型的变 ...
- extjs+MVC4+PetaPoco+AutoFac+AutoMapper后台管理系统（附源码）
前言 本项目使用的开发环境及技术列举如下:1.开发环境IDE:VS2010+MVC4数据库:SQLServer20082.技术前端:Extjs后端:(1).数据持久层:轻量级ORM框架PetaPoco ...
- POJ2505 A multiplication game(博弈)
题意 开始时$p = 1$,每次可以乘$2 - 9$,第一个使得$p \geqslant n$的人赢 问先手是否必胜 $1 <n <4294967295$ Sol 认真的推理一波. 若当前 ...
- 虚拟机安装win7 64位-完美解决-费元星
安装虚拟机是为了安装一个oracle ,在本机安装 ,本机会卡死,不是每次启动电脑都用oralce,而且有时候服务是关不干净的,所以安装在虚拟机里,需要的时候在开启,特做此记录! 费元星版权Q[971 ...