vue服务端渲染操作简单入门实例分析

2024-05-06 15:35:22

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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)

上一篇：JS常见面试试题总结【去重、遍历、闭包、继承等】

下一篇：package.json配置文件构成详解