vue ssr

创建工程 vue cli3

   vue create ssr

安装依赖

   vue-server-renderer // 渲染器
   express  // nodejs 服务器
   npm i vue-server-renderer express -D

编写服务端脚本

    // nodejs 服务器
    const express = require('express')
    const Vue = require('vue')
    // 创建 express 与vue 实例
    const app = express()
    // 创建渲染实例
    const renderer = require('vue-server-renderer').createRenderer()
    // 将来将Vue 传给渲染器的实例会得到一个html 内容
    const page= new Vue({
        data:{title:'服务端渲染'},
        template:'<div>{{title}},vue ssr</div>'
    })
    app.get('/',async(req,res)=>{
        try {
            const html = await renderer.renderToString(page)
            res.send(html)
        } catch (error) {
            res.status(500).send('服务器内部错误')
        }
    
    })
    app.listen(3000,()=>{
        console.log('渲染服务器启动成功！')
    })

采用vue-router

src下新建一个router文件夹，新建一个index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Detail from '@/components/Detail'

Vue.use(Router)
//将来每次用户请求都需要一个router 实例
export default function createRouter() {
    return new Router({
        mode: 'history',
        routes: [
            { path: '/', component: Index },
            { path: '/detail', component: Detail }
        ]
    })
}

components 下新建两个文件
Detail.js

<template >
    <div>
        Detail Page
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang='scss' scoped>

</style>

Index.js

<template >
    <div>
        index Page
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang='scss' scoped>

</style>

修改App.vue

<template>
  <div id="app">
   <nav>
     <router-link to='/'>首页</router-link>
     <router-link to='/detail'>详情页</router-link>
   </nav>
   <router-view></router-view>
  </div>
</template>

入口

// 创建vue 实例
import Vue from 'vue'
import App from './App.vue'
import createRouter from './router'
export default function createApp(){
    const router = createRouter()
    const app = new Vue({
        router,
        render:h=>h(App)
    })
    return {app,router}
}

服务端入口

// 渲染首屏幕
import createApp from './app'
export default context=>{
    return Promise((resolve,reject)=>{
        const {app,router} = createApp()
        // 进入首屏
        router.push(context.url)
        router.onReady(()=>{
            resolve(app)
        },reject)
    })
}

客户端入口

// 挂载激活app
import createApp from './app'
const {app,router} = createApp()
router.onReady(()=>{
    app.$mount('#app')
})

webpack 打包
npm i webpack-node-externals lodash.merge -D

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require("webpack-node-externals")
const merge = require("lodash.merge")
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const target = TARGET_NODE ? "server" :'client'
module.exports = {
    css:{
        extract: false
    },
    outputDir:'./dist/'+target,
    configureWebpack:()=>({
        entry:`./src/entry-${target}.js`,
        devtool:'source-map',
        target: TARGET_NODE ? 'node' : 'web',
        node: TARGET_NODE? undefined:false,
        output:{
            libraryTarget:TARGET_NODE ? 'commonjs2' :undefined
        },
        externals:TARGET_NODE ? nodeExternals({
            allowlist:[/\.css$/]
        }):undefined,
        optimization:{
            splitChunks:TARGET_NODE ? false :undefined
        },
        plugins:[TARGET_NODE? new VueSSRServerPlugin() :new VueSSRClientPlugin()]
    }),
    chainWebpack:config=>{
        config.module
        .rule("vue")
        .use("vue-loader")
        .tap(options=>{
            merge(options,{
                optimizeSSR:false
            });
        });

    }
}

打包脚本
npm i cross-env -D

"scripts": {
    "build:client":"vue-cli-service build",
    "build:server":"cross-env WEBPACK_TARGET=node vue-cli-service build --node server",
    "build":"npm run build:server && npm run build:client"
  },

新建一个template 作为服务端渲染的模版 index.temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue ssr</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

服务端渲染脚本更改

// nodejs 服务器
const express = require('express')
const Vue = require('vue')
const fs = require('fs')
// 创建 express 与vue 实例
const app = express()
// 创建渲染实例
const {createBundleRenderer} = require('vue-server-renderer')
// 服务端bundle
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:fs.readFileSync('../public/index.temp.html','utf-8'),// 宿主模版文件
    clientManifest
})
// 中间件处理静态文件请求
app.use(express.static('../dist/client',{index:false}))
// 路由的处理交给vue
app.get('*',async(req,res)=>{
    try {
        const context = {
            url:req.url,
            title:'ssr test'
        }
        const html = await renderer.renderToString(context)
        res.send(html)
    } catch (error) {
        res.status(500).send('服务器内部错误')
    }
 
})
app.listen(3000,()=>{
    console.log('渲染服务器启动成功！')
})