从零开始构建一个vue ssr的项目

最新推荐文章于 2024-05-04 06:29:50 发布

缓月

最新推荐文章于 2024-05-04 06:29:50 发布

阅读量782

点赞数

分类专栏： Vue 性能优化

本文链接：https://blog.csdn.net/qq_42893625/article/details/109211226

版权

Vue 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

性能优化

3 篇文章 0 订阅

订阅专栏

文章目录

一、ssr是什么？
二、构建步骤

一、ssr是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、构建步骤

1.初始化创建一个实例

_{初始化搭建可以参考这个博客：[https://www.jianshu.com/p/17bc00fc6993](https://www.jianshu.com/p/17bc00fc6993)}

1）创建server.js

新建一个文件夹命名为server.js（随意，也可以取自己喜欢的名字），创建一个 vue 服务端渲染的应用程序。
代码参考 ssr官网：

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 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)
})

在terminal里面输入node server.js运行这个文件，结果如下：
在这里插入图片描述

2）构建模板文件

在文件夹里分别建两个同级文件index.html和index.js。
index.html文件夹里面的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
        {{{meta}}}
</head>
<body>
    <!--vue-ssr-outlet--> <!--这是注入应用程序标记的位置，一定不能删除，会报错的。-->
</body>
</html>

index.js文件夹的内容：

// 参考博客： https://www.jianshu.com/p/17bc00fc6993
// https://ssr.vuejs.org/zh/#什么是服务器端渲染-ssr-？
// SSR: server side renderer
// 后端渲染的框架： Nuxt.js

// $ npm install vue vue-server-renderer --save
// $ npm install express --save

const Vue = require('vue')
const express = require('express')
const fs = require('fs')

const server = express()

//读取模版
//初始化渲染对象
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.html', 'utf-8')
})  
// 此参数是vue 生成Dom之外位置的数据  如vue生成的dom一般位于body中的某个元素容器中，
//此数据可在header标签等位置渲染，是renderer.renderToString()的第二个参数，
//第一个参数是vue实例，第三个参数是一个回调函数。
const context = {
      title: 'Vue-ssr初探',
}

server.get('*', (req, res) => {
      //创建vue实例   主要用于替换index.html中body注释地方的内容，
    //和index.html中 <!--vue-ssr-outlet-->的地方是对应的
    const app = new Vue({
        data: {
            url: req.url,
            data: ['加油，你是最胖的',"哈哈哈哈哈哈哈","你已看的透彻,又何必自找失落"],
            title: '欢迎学习vue-ssr服务端渲染'
        },
        //template 中的文本最外层一定要有容器包裹， 和vue的组件中是一样的，
      //只能有一个父级元素。
        template: `
            <div>
                <div>url : {{url}}</div>
                <p>{{title}}</p>
                <p v-for='item in data'>{{item}}</p>
            </div>
        `
    })

//将 Vue 实例渲染为字符串  (其他的API自己看用法是一样的)
// 参1： vue实例对象
// 参2： 给模板传入的数据
// 参3： 渲染结束的回调，可以拿到最终渲染的html字符串
    renderer.renderToString(app, context,  (err, html) => {
        if (err) {
            res.status(500).end('err:' + err) 
            return 
        }
    //将模版发送给浏览器
        res.end(html)
        console.log('http://localhost:8080/')
    })
})

server.listen(8080,()=>{
    console.log("server running at http://127.0.0.1:8080")
})

3）node index.js查看效果

在terminal里面输入node index.js，访问 http://127.0.0.1:8080或者http://localhost:8080/就可以打开看到页面了。
在这里插入图片描述

2.

未完，后面再补。。。

缓月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
从零开始构建一个vue ssr的项目

文章目录一、ssr是什么？二、构建步骤1.初始化创建一个实例1）安装依赖2）构建模板文件3）node index.js查看效果2.总结一、ssr是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、构建步骤1.初始化创建一个实例初始化搭建可以参考这个博客：[https://www.jianshu.com/p/17bc00fc6993](https://www.jianshu.com/p/17bc00fc6993)1）安装依赖新建一个文件夹，输入
复制链接

扫一扫