vue如何利用vue-server-renderer做服务端渲染

最新推荐文章于 2025-06-03 16:44:16 发布

guocongcong-cc

最新推荐文章于 2025-06-03 16:44:16 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue项目源码分享文章标签： vue javascript html

本文链接：https://blog.csdn.net/weixin_40073115/article/details/104904069

本篇博文初步探索使用vue-server-renderer做服务端渲染一个最简单的页面，学会如何用vue做ssr

环境准备

koa,koa-router,vue,vue-server-renderer

 cnpm install vue --save
 cnpm install vue-server-render --save-d
 cnpm install koa --sava
 cnpm install koa-router --save

代码

vueserver.js

const Koa = require("koa");
const Router = require("koa-router");
const Vue = require("vue");
const render = require("vue-server-renderer").createRenderer();


const app = new Koa();
const router = new Router();


const vue = new Vue({
    data:{
        name:"gcc的第一个vue ssr 页面"
    },
    
    template:`
        <div>
            <h1>gcc dfg</h1>
             <button @click="tm(123)">ddddd</button>
        </div>
    `,
    methods: {
        tm: function (e) {
            console.log(e);
        }
    }
})

router.get('/',ctx=>{
    //拼接html字符串
    render.renderToString(v