Vue服务端渲染

最新推荐文章于 2024-08-19 21:49:22 发布

青崖林夕

最新推荐文章于 2024-08-19 21:49:22 发布

阅读量6.5k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/u012757419/article/details/98974693

版权

本文详细介绍了Vue.js服务端渲染的原理和实践过程，包括为何使用服务端渲染来提升SEO，如何创建项目，配置webpack，以及在服务器端和客户端的打包与处理。通过示例代码展示了从创建Vue-cli项目到实现服务端渲染的完整步骤，帮助开发者理解并掌握Vue服务端渲染的实现。

摘要由CSDN通过智能技术生成

一、前言

1、服务端渲染图解

2、简介服务端渲染

3、vue-cli脚手架项目创建，实现客户端渲染和服务端渲染

4、演示demo地址：https://github.com/4561231/ssr-vue

二、主要内容

1、服务端渲染图解参照另一篇：服务端渲染和客户端渲染

2、简介服务端渲染

Vue.js是构建客户端应用程序的框架，默认情况下，可以在浏览器中输出vue组件，进行生成Dom和操作DOM, 然而，也可以将同一个组件渲染成为服务端的字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可以交互的应用程序。也就是你先在前端写好组件页面，然后交到服务端，服务端需要通过他自家的某个程序插件，然后将客户端的组件生成对应的html字符串，最后发送给浏览器。然后浏览器响应出来页面。

3、新建项目，安装依赖路，创建服务端代码

　　(1)server.js

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

const renderer = require('vue-server-renderer').createRenderer();

//创建vue实例
const app = new Vue({
    template:'<div>hello vue</div>'
})

//服务器渲染的核心就在于：
//通过vue-server-renderer插件的renderToString()方法，将vue实例转化为字符串插入到html中
express.get('/',(req,res)=>{
    renderer.renderToString(app, (err,html)=>{
        if(err){
            return res.state(500).end('运行错误')
        }
          //返回给浏览器一串html字符串
        res.send(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>服务端渲染</title>
        </