vue-ssr入门浅析（未完成……）-CSDN博客

本文链接：https://blog.csdn.net/qingbaicai/article/details/108652246

SSR（Server-Side Rendering），即服务端渲染。
所谓服务端渲染，一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

以下简述vue ssr步骤

1、安装渲染器vue-server-renderer node服务器express 根目录下创建server文件夹=>创建index.js文件

在server 创建好HTML模板 createRenderer函数可以接收一个对象作为配置参数。配置参数中有一项为template,这项配置的就是我们即将使用的Html模板。使用fs模块将html模板读取出来，将ssr代码挂在该html上

作用创建node服务器，并区分服务、客户需求

// 创建nodejs服务器
const express = require('express')
//创建express实例 和 vue实例
// const vueApp = require('../src/app')
// const App = require('../src/entry-server')

let  path = require('path')

const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('../dist/server/vue-ssr-server-bundle.json')
const clientManifest = require('../dist/client/vue-ssr-client-manifest.json')
const renderer = createBundleRenderer(
    serverBundle,
    {
        runInNewContext: false, //上下文
        template: require('fs').readFileSync(path.join(__dirname,'./index.html'),'utf-8'),
        clientManifest
    }
    )

const app = express()
//中间件 处理静态文件请求
app.use(express.static('../dist/client',{index: false}))


//将路由的处理交给vue
app.get('*', async (req,res)=>{
    // let vm = vueApp({})
    let { url } = req
    const context = {
        url,
        title: '测试ssr'
    }
    // let vm = await App({url}) //可以传递给vue实例一些参数
    const html = await renderer.renderToString(context)
    res.send(html)
})

app.listen(3000, ()=>{
    console.log('渲染服务器启动成功')
})

2、设置el的挂载点，在index.html中设置，通知createRenderer把template添加到什么地方

3、创建路由信息

import vueRouter from 'vue-router'
import Vue from 'vue'
import About from '@/views/About'
import Home from '@/views/Home'

Vue.use(vueRouter)

export default function createRouter(){
  return new vueRouter({
    mode: 'history',
    routes:[
      {path: '/', component: About},
      {path: '/Home', component: Home},
    ]
  })
}

5、抽离出Vue、路由

// 创建vue实例
import Vue from "vue";
import App from "./App.vue";
import createRouter from "./router/index";

export default function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })
    return {
        router,
        app
    }
}

6、创建服务端路由