SSR

SSR

建立server服务

npm i express vue-server-render -D

    // node 服务
    // 1. 加载依赖
    const Vue =require(vue);
    const app = express();
    const render = require('vue-server-renderer').createRenderer()
    
    //渲染器渲染配置page得到html内容
    //2.page
    const page = new Vue({
        template :'<div>SSR page</div>'
    })
    
    //处理静态文件请求
    app.use(express.static('../dist/client'))
    
    //3.处理传递接口
    app.get('*', async(req,res)=>{
        try{
            const html = await renderer.renderToString(page);
            
            res.send(html);
        }catch(error){
            res.status(500).send('server inner Error')
        }
    })
    
    //4.监听
    app.listen(3000, ()=>{
        console.log('start')
    })

路由

    export default function createRouter(){
        return new Router({
            routes:[
                {
                    path:'/',
                    name:'HelloWorld',
                    component:HelloWorld
                }
            ]
        })
    }

entry-client

    import createApp from './app'
    
    
    const { app, router } = creataApp;
    router.onReady(()=>{
        app.$mount('#app')
    })
    

entry-server

    import createApp from './app'
    
    export default context =>{
        return new Promise((resolve,reject)=>{
            const { app, router } =createApp();
            
            router.push(context.url)
            
            router.onReady(()=>{
                resolve(app)
            },reject)
        })
    }

app.js

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

搭建服务