Vue(服务端渲染)
一、前言
1、服务端渲染图解
2、简介服务端渲染
3、vue-cli脚手架项目创建，实现客户端渲染和服务端渲染
4、演示demo地址：https://github.com/4561231/ssr-vue
二、主要内容
1、服务端渲染图解参照另一篇：服务端渲染和客户端渲染
2、简介服务端渲染
Vue.js是构建客户端应用程序的框架，默认情况下，可以在浏览器中输出vue组件，进行生成Dom和操作DOM, 然而，也可以将同一个组件渲染成为服务端的字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可以交互的应用程序。也就是你先在前端写好组件页面，然后交到服务端，服务端需要通过他自家的某个程序插件，然后将客户端的组件生成对应的html字符串，最后发送给浏览器。然后浏览器响应出来页面。
3、 新建项目，安装依赖路，创建服务端代码
(1)server.js
const Vue = require('vue')
const express = require('express')();
const renderer = require('vue-server-renderer').createRenderer();
//创建vue实例
const app = new Vue({
template:'<div>hello vue</div>'
})
//服务器渲染的核心就在于：
//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中
express.get('/',(req,res)=>{
renderer.renderToString(app, (err,html)=>{
if(err){
return res.state(500).end('运行错误')
}
//返回给浏览器一串html字符串
res.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>服务端渲染</title>
</head>
<body>
${html}
</body>
</html>`)
})
})
express.listen(8888, ()=>{
console.log('服务器已经启动')
})
(2)具体实现原理
(3)测试，发现响应回来的文件里面有内容，这样也说明了服务端渲染是对SEO引擎比较好的
（4）小结：我们使用服务端渲染是为了弥补单页面应用SEO能力不足的问题，实际上我们第一次在浏览器地址栏输入地址的时候，并且得到返回页面之后，所有的操作仍然是单页面应用在控制的，我们所做的服务端渲染，只是在平时返回单页面应用hml上增加了对应路由的页面信息，让爬虫好爬取到。
所以项目可以分为客户端渲染和服务端渲染。
4、用vue-cli项目实现服务端渲染
（1）npm创建项目
（2）npm run build的时候打包走的是webpack.prod.config.js这个文件，现在我们新建一个webpack.server.config.js这个文件，在服务器打包的时候走这个文件
package.json里面加入如下代码
"server":"webpack --config build/webpack.server.conf.js"
webapck.server.config.js添加如下代码
//引入webpack的主要配置
const webpack = require('webpack')
const merge = require('webpack-merge') //引入webpack.base.config这个文件是依赖这个基础文件的
const base = require('./webpack.base.config') module.exports=merge(base, {
target:'node',//这里要写node 目的是让后端支持require语法
entry:"./src/entry-server.js",//当你服务端在打包的时候，就会走这个入口
output:{
filename:'bundle.server.js',//打包后生成的文件
libraryTarget:'commonjs2'
},
plugins:[]
})
(2)由于以前生成vue实例的方式是单例的，现在我们需要在每次请求的时候生成一个vue组件
在mian.js中修改
/* eslint-disable no-new */
//El:’#app相当于document.getElementbyId(‘#app’ 但是在node.js中识别不了这种语法，所以我们不能这样写
/*new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})*/
import {createRouter} from './router'
export function createApp(){
const router = createRouter();
const app = new Vue({
router,
components:{App},
template:'<App/>'
})
return {app};
}
同理最好将路由也写成构造函数形式
export default createrRouter(){
return new Router({
mode:'history',
routes:[
{
path:'/',
name:'Home',
component:Home
},
{
path:'/about',
name:'About',
component:About
},
{
path:'/test',
name:'Test',
component:Test
}
]
})
(3)npm run server打包生成文件，并在服务端引入客户端生成的打包文件
打包生成文件
在服务端引入打包生成的文件
//需要在服务端配置打包生成的客户端文件
const createApp = require('./dist/bundle.server.js')['default']
(4)服务端拿到客户端打包生成的文件，进行处理
const Vue = require('vue')
const express = require('express')();
//需要在服务端配置打包生成的客户端文件
const createApp = require('./dist/bundle.server.js')['default']
const renderer = require('vue-server-renderer').createRenderer();
//服务器渲染的核心就在于：
//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中
express.get('*',(req,res)=>{
const context = {url:req.url};
createApp(context).then(app=>{//这个app就是刚刚打包之后的app
renderer.renderToString(app, (err,html)=>{
if(err){
return res.state(500).end('运行错误')
}
//返回给浏览器一串html字符串
res.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>服务端渲染</title>
</head>
<body>
${html}
</body>
</html>`)
})
})//取到entry.js里面的
})
express.listen(8888, ()=>{
console.log('服务器已经启动')
})
（5）测试看到一开始请求的时候就会出现内容，可以看到服务器返回的html文件中，已经有对应页面的SEO信息了。
但是，还没有成功，因为现在反回过来的只是一个页面对应信息，如果你现在切换路由又会对服务器发送一次请求，单页面应用还没成功。但是vue的特点就是利用单页面，
接下来需要配置客户端渲染
（1）在package.json中配
"client"： "webpack --config build/webpack.client.conf.js"
(2)新建webpack.client.conf.js
const webpack = require('webpack')
const path = require('path')
function resolve(dir){
return path.join(__dirname,'..',dir)
}
module.exports={
entry:"./src/entry-client.js",//打包时走这个文件
output:{
path:path.resolve(__dirname,'../dist'),
publicPath:'/dist/',
filename:'bundle.client.js'
},
plugins:[],
resolve:{
extensions:['.js','.vue','.json'],
alias:{
'vue$':'vue/dist/vue.esm.js',
'@':resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions:{
preserveWhitespace:false
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
]
}
}
（3）entry-client.js
//客户端也要创建，因为客户端渲染和服务端渲染是两个不同的vue实例
import{createApp} from './main' const {app} =createApp();
const router =app.$router; //这里可以拿到app了，
window.onload=function(){
app.$mount('#app')//在window加载完成之后
}
(4)npm run client打包生成文件
（5）同样需要在服务器中添加打包的客户端文件
//客户端渲染文件
const exp = require('express');
///将静态文件目录设置为：项目根目录+/dist
express.use('/',exp.static(__dirname+'/dist'));
//客户端打包的文件
const clientBundleFileUrl = '/bundle.client.js'
//在下面的模板中用script的方式引入
<script src="${clientBundleFileUrl}"></script>
（6）启动服务器，测试
4、总结：
（1）要做ssr服务端渲染首先需要一个Sever entry他的作用是渲染SEO的信息
（2）如果你仅仅只有这四步操作，并没有实现单页面应用，而是每次点击的时候都会对服务端发起请求
（3）要实现单页面应用，需要做客户端打包，然后将客户端打包的文件混入到服务端
（4）单页面应用，只有第一次加载的时候才会发送请求，点击a标签的时候加载的是组件，
5、
三、总结
https://ssr.vuejs.org/zh/guide/structure.html#介绍构建步骤
https://segmentfault.com/a/1190000015964813
Vue(服务端渲染)的更多相关文章
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
- vue服务端渲染简单入门实例
想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...
- vue服务端渲染提取css
vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 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有什么异同 客户端 ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
随机推荐
- 前端入门24-响应式布局（BootStrap）
声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...
- 生鲜配送管理系统_升鲜宝 V2.0 小程序辅助系统工具矩阵系列相关说明
随着微信红利的进一步释放,使用人群的不断增加,小程序从2017年01月第一批开发者出现后,2018年小程序得到快速的提升,小程序开发的相关应用小工具得到了市场的青咪,社会化大分工.协同.共享.协作的思 ...
- 自托管websocket和webapi部署云服务器域名及远程访问
当写完websocket和webapi服务端时,在本地测试时是没有问题的,因为是通过本地IP及端口号访问(例:127.0.0.1:8080\api\test),也就没有防火墙等安全限制,但当部署到云服 ...
- Linux通过NFS实现文件共享
在项目生产环境我们经常需要实现文件共享,传统的常见方案是通过NFS,实现服务器之间共享某一块磁盘,通过网络传输将分散的文件集中存储在一块指定的共享磁盘,实现基本的文件共享.实现这种方案,分服务端和客户 ...
- MongoDB- 简单操作命令
MongoDB是基于集合操作的数据库 1.进入与退出 mongo / exit 2.库操作 显示所有库: show dbs; 查看当前所在库: db; 切换&使用某个库: use db_nam ...
- .Net Core 在Linux服务器下部署程序--(4). 前端ReactWeb应用部署
确认第二步中的软件已经安装完成 Nodejs前端Web服务器 Zip与UnZip压缩包软禁 nrm前端包源管理器 PM2前端Web程序守护进程 创建部署文件夹 如果已经执行过( 3. 租户平台后端程序 ...
- 卸载或安装Git出现Invalid drive错误的解决方案【简记】
前言:工作中由于公司的电脑(SSD+HDD)硬盘(HDD)突然坏了,只剩下一个系统盘(SSD).然后就是有个比较紧急的需求正在做,申请换的新硬盘不能立刻换上,因为工作的机器不在公司,操作远程机器工作, ...
- torm入门（三）HelloWorld示例
一.配置开发环境 storm有两种操作模式: 本地模式和远程模式.使用本地模式的时候,你可以在你的本地机器上开发测试你的topology, 一切都在你的本地机器上模拟出来; 用远程模式的时候你提交的t ...
- PLSQL Developer图形化界面新建用户并授权并导入脚本
最近用了PLSQL Developer第三方的软件.记录一下实现新建用户并授权并导入脚本的功能. 第一步.切换sys用户(如果此处方法已经掌握,直接切换sys即可,就不用看这一步了) 首先检查当前登录 ...
- CSAPP：第十章 系统级I/O
CSAPP:第十章 系统级I/O 10.1 unix I/O10.2 文件10.3 读取文件元数据10.4 读取目录内容10.5 共享文件10.6 我们该使用哪些I/O函数? 10.1 unix I/ ...