vue ssr

神奇大叔

于 2020-08-05 15:57:15 发布

阅读量151

点赞数

分类专栏： vue服务器渲染文章标签： vue

本文链接：https://blog.csdn.net/weixin_43294560/article/details/107816362

版权

vue服务器渲染专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue ssr

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：
复制链接

扫一扫