vue ssr

傷城~ 2021-07-24 22:19 424阅读 0赞

1、安装
    	npm install vue vue-server-renderer --save
    	
    2、引入
    	const Vue = require('vue')
    
    3、创建实例
    	const app = new Vue({
    	  data:{参数键值对}
    	  template: `反引号内书写html内容,用法和正常使用vue一样`,
    	  methods:{...},
    	  生命周期(){...}
    	})
    
    4、将 Vue 实例渲染为 HTML,如果没有传入回调函数，则会返回 Promise：
    	renderer.renderToString(app).then(html => {
    	
    	  console.log(html)
    	  
    	}).catch(err => {
    	
    	  console.error(err)
    	  
    	})
    
    5、通过服务器返回
    	app.get('/',(req,res)=>{
    		进行3步,
    		
    		renderer.renderToString(app).then(err, html) => {
    		    if (err) {
    		      res.status(500).end('Internal Server Error')
    		      return
    		    }
    		    
    		    res.writeHead(200,{"Content-Type":'text/html,charset=utf8'})
    		    
    		    res.end(`
    		      <!DOCTYPE html>
    		      <html lang="en">
    		        <head><title>Hello</title></head>
    		        
    		        html参数即为Vue实例中的模板
    		        <body>${html}</body>
    		        
    		      </html>
    		    `)
    		  })
    		  
    6、通过导入html文件渲染
    
    	const renderer = require('vue-server-renderer').createRenderer({
    	  template: require('fs').readFileSync('./x.html', 'utf-8')
    	})
    	
    	renderer.renderToString(app, (err, html) => {
    	 	...
    	})
    	
    	给html文件传入参数
    		const context = {参数键值对}
    		renderer.renderToString(app, context, (err, html) => {
    			...
    		})
    	html文件使用参数
    		{
       {键名}}     解析html标签
    		{
       {
       {键名}}}	三花括号不解析html标签

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 SSR

CSR: 客户端渲染：简而言之是在浏览器端渲染。先拿到dom,css,通过js（ajax）拿到后台数据挂载在dom上显示；优点：交互性好，可以最小单位的返回

左手的ㄟ右手/ 2023年06月09日 15:30/ 0 赞/ 15 阅读

相关 temp ssr

由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致

柔光的暖阳◎/ 2023年01月09日 12:35/ 0 赞/ 169 阅读

相关 Vue-ssr

spa是单页面应用程序什么是ssr server side render ,简称服务端渲染，比起传统的web渲染技术 asp.net php jsp。

桃扇骨/ 2023年01月08日 08:22/ 0 赞/ 191 阅读

相关 Vue--插件--Vue SSR

其他网址 > [基于vue现有项目的服务器端渲染SSR改造 - 小火柴的蓝色理想 - 博客园][vue_SSR_ - _ -] > [Vue.js 服务器端渲染指南

电玩女神/ 2022年12月29日 14:01/ 0 赞/ 191 阅读

相关 Nuxt入门到打包部署 Vue-SSR项目

什么是服务端渲染前端渲染流程：前端请求服务器，把html文件以资源的形式返回前端，浏览器拿到html文件解析。服务器渲染：返回html之前，会先将一些数据

我不是女神ヾ/ 2022年11月21日 06:53/ 0 赞/ 767 阅读

相关 Vue.js 服务端渲染（SSR）

概述 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

﹏ヽ暗。殇╰゛Y/ 2022年11月06日 13:58/ 0 赞/ 247 阅读

相关【Vuejs】971- Vue SSR 性能优化实践

> 齐云雷，微医云服务团队前端工程师，本文是作者在《第二届缤纷前端技术沙龙》分享主题的文字版。估计大部分读者对标题中的性能优化更感兴趣，可惜我分享的重点其实更多在于实践。实

墨蓝/ 2022年10月18日 04:51/ 0 赞/ 247 阅读

相关 vue seo ssr

https://vuejs.org/v2/guide/ssr.html https://github.com/chrisvfritz/prerender-spa-

左手的ㄟ右手/ 2022年09月29日 15:49/ 0 赞/ 216 阅读

相关 Vue 服务端渲染（SSR）

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Vue 服务端渲染（SSR）什么是服务端渲染，简

旧城等待，/ 2022年01月14日 14:21/ 0 赞/ 368 阅读

相关 vue ssr

1、安装 npm install vue vue-server-renderer --save 2、引入 const Vue =

傷城~/ 2021年07月24日 22:19/ 0 赞/ 425 阅读