(一)02 -Vue的SSR演示——服务端渲染-基于vue渲染，把vue模板转换成html字符串，输出给浏览器，有利于seo，但既有客户端代码，又有服务端代码，较麻烦

最新推荐文章于 2024-05-30 15:55:10 发布

viceen

最新推荐文章于 2024-05-30 15:55:10 发布

阅读量463

点赞数

分类专栏： vue.js进阶文章标签： vue js nodejs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104979919

版权

vue.js进阶专栏收录该内容

47 篇文章 5 订阅

订阅专栏

示例1：基于node的程序

第一步：在命令行中输入如下，生成package.json文件

npm init -y

第二步：新建app1.js文件，运行在node环境中

渲染一个-vue-实例：基础模板代码进行修改

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')  //导入vue
    //创建vue实例
const app = new Vue({
  template: `<div>姓名：{{ name }}, 年龄：{{ age }}</div>`,
  data: {
    name: '张三',
    age: 18
  }
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
// renderer.renderToString(app).then(html => {
//   console.log(html)
// }).catch(err => {
//   console.error(err)
// })

第三步：在命令行中输入clear，可清除；运行上述代码，输入如下，并回车

node app1.js

可在命令行中查看渲染出来的结果

//插值表达式解析成具体的数据
<div data-server-rendered="true">Hello World 张三 --18</div>

示例2：服务端渲染-基于vue渲染，用vue拼接html代码，把vue模板转换成html字符串，输出给浏览器

这种方式，有利于seo，但既有客户端代码，又有服务端代码，比较麻烦

第一步：开启服务器的最快方式express，命令行中下载服务器

npm i express

第二步：新建app2.js文件，首先导入express模块

与服务器集成

1.0版本

//导入express模块
const express = require('express')
const Vue = require('vue')
//创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()

//创建app对象，可以注册路由、监听端口
const app =express()
//设置路由  '*'代表所有路由
app.get('/', (req, res) => {
  const vue = new Vue({
    template: '<div>{{ foo }}</div>',
    data: {
      foo: 'Hello world'
    }
  })

  // 第 3 步：通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
  renderer.renderToString(vue, (err, html) => {
    if (err) {
      console.log(err)
      return
    }
    res.end(html)
    // => <div data-server-rendered="true">Hello World</div>
  })
})

//监听端口  3000或8080
app.listen(8080, () => {
  console.log('监听8080')
})

2.0版本

//导入express模块
const express = require('express')
const Vue = require('vue')
    //创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()

//创建app对象，可以注册路由、监听端口
const app = express()

//设置路由  '*'代表所有路由
app.get('*', (req, res) => {
    // 创建一个vue的实例
    const vue = new Vue({
        data: {
            url: req.url,
            msg: '这是服务端渲染的数据'
        },
        template: `<div>访问的 URL 是： {{ url }} --- {{ msg }}</div>`
    })

    // 第 3 步：通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
    renderer.renderToString(vue, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        //<meta charset="utf-8">  告诉浏览器代码是utf-8格式，可渲染中文
        res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title><meta charset="utf-8"></head>
        <body>${html}</body>
      </html>
    `)
    })
})

//监听端口  3000或8080
app.listen(3000, () => {
    console.log('监听3000')
})

第三步：在命令行中输入clear，可清除；运行上述代码，输入如下，并回车

node app2.js

可在命令行中看到监听成功，在网址中输入17.0.0.1:8080查看渲染出来的结果

有中文，会乱码

此时,设置meta标签

//告诉浏览器代码是utf-8格式，可渲染中文

第四步：命令行中ctrl+c重启服务器，刷新页面，显示成功

在这里插入图片描述

第五步：修改网址，增加后缀index，再次显示

在这里插入图片描述

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(一)02 -Vue的SSR演示——服务端渲染-基于vue渲染，把vue模板转换成html字符串，输出给浏览器，有利于seo，但既有客户端代码，又有服务端代码，较麻烦

示例1：基于node的程序第一步：在命令行中输入如下，生成package.json文件npm init -y第二步：新建app1.js文件，运行在node环境中渲染一个-vue-实例：基础模板代码进行修改// 第 1 步：创建一个 Vue 实例const Vue = require('vue') //导入vue //创建vue实例const app = new Vue...
复制链接

扫一扫

专栏目录