vue vue-server-renderer实现SSR(服务端渲染)

参考文章:
简书:https://www.jianshu.com/p/c6a07755b08d
掘金:https://github.com/tiodot/vnews
文章中叙述的代码地址:https://github.com/ShuangWW/vue-server-renderer

项目一

1.项目搭建

mkdir ssr1                                       // 新建文件夹ssr1
cd ssr1                                          // 进入文件夹ssr1
cnpm init                                       // 初始化
cnpm i vue vue-server-renderer --save           // 安装插件vue、vue-server-renderer
cnpm i express --save                           // 安装插件express

2.在根目录下创建server.js文件

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


const app = new Vue({
    template:'<div>hello world</div>'
})

express.get('/',(req,res)=>{
    renderer.renderToString(app,(err,html)=>{
        if(err){
            return res.state(500).end('运行时错误')
        }
        res.send(`
            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Vue2.0 SSR渲染页面</title>
                </head>
                <body>
                    ${html}
                </body>
            </html>        
        `)
    })
})

express.listen(8080,()=>{
    console.log('服务器已经启动!')
})

3.输入node server.js启动服务,在浏览器输入http://localhost:8080访问

页面.png

控制台.png

项目目录结构.png

项目二

1.项目搭建,并创建如下目录结构

mkdir ssr2                                       // 新建文件夹ssr2
cd ssr2                                          // 进入文件夹ssr2
cnpm init                                       // 初始化
cnpm i vue vue-server-renderer --save           // 安装插件vue、vue-server-renderer
cnpm i express --save                           // 安装插件express
项目目录.png

2.将package.json文件修改如下配置,然后cnpm i安装相关需要的依赖包

{
  "name": "ssr2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack --config ./webpack/webpack.server.js",
    "client": "webpack --config ./webpack/webpack.client.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.0",
    "babel": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "body-parser": "^1.18.3",
    "compression": "^1.7.2",
    "express": "^4.15.4",
    "express-http-proxy": "^1.2.0",
    "gulp": "^3.9.1",
    "gulp-shell": "^0.6.5",
    "http-proxy-middleware": "^0.18.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "shell": "^0.5.0",
    "superagent": "^3.8.3",
    "vue": "^2.2.2",
    "vue-meta": "^1.5.0",
    "vue-router": "^2.2.0",
    "vue-server-renderer": "^2.2.2",
    "vue-ssr-webpack-plugin": "^3.0.0",
    "vuex": "^2.2.1",
    "vuex-router-sync": "^4.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.4",
    "webpack": "^2.7.0"
  }
}

3.src文件夹

// App.vue

<template>
    <div>
        <h2>欢迎来到SSR渲染页面</h2>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
}
</script>

<style>
</style>
// route.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default function createRouter() {
    let router = new VueRouter({
        // 要记得增加mode属性,因为#后面的内容不会发送至服务器,服务器不知道请求的是哪一个路由
        mode: 'history',
        routes: [
            {
                alias: '/',
                path: '/home',
                component: require('./views/home.vue')
            },
            {
                path: '/animal',
                component: require('./views/animal.vue')
            },
            {
                path: '/people',
                component: require('./views/people.vue')
            }
        ]
    })

    return router
}
// main.js

import Vue from 'vue'
import createRouter from './route.js'
import App from './App.vue'

// 导出一个工厂函数,用于创建新的vue实例(可以隔离开各个客户端的请求,每次客户端的请求,都会创建一个新的vue实例)
export function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })

    return app
}
// home.vue

<template>
    <div>
        home
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>
// animal.vue

<template>
    <div>
        animal
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>
// people.vue

<template>
    <div>
        people
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

4..babelrc文件夹用于配置babel

{
      "presets": [
            "babel-preset-env"
      ],
      "plugins": [
            "transform-runtime"
      ]
}

5.server.js文件

/* server.js */
const express = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const createApp = require('./dist/bundle.server.js')['default']

// 响应路由请求
express.get('*', (req, res) => {
    const context = { url: req.url }

    // 创建vue实例,传入请求路由信息
    createApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) { return res.state(500).end('运行时错误') }
            res.send(`
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Vue2.0 SSR渲染页面</title>
                    </head>
                    <body>
                        ${html}
                    </body>
                </html>
            `)
        })
    }, err => {
        if(err.code === 404) { res.status(404).end('所请求的页面不存在') }
    })
})


// 服务器监听地址
express.listen(8080, () => {
    console.log('服务器已启动!')
})

6.entry-server.js

import { createApp } from '../src/main'

export default context => {
    return new Promise((resolve, reject) => {
        const app = createApp()

        // 更改路由
        app.$router.push(context.url)

        // 获取相应路由下的组件
        const matchedComponents = app.$router.getMatchedComponents()

        // 如果没有组件,说明该路由不存在,报错404
        if (!matchedComponents.length) { return reject({ code: 404 }) }

        resolve(app)
    })

}

7.webpack.server.js

const path = require('path');
const projectRoot = path.resolve(__dirname, '..');


module.exports = {
    // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
    target: 'node',
    entry: ['babel-polyfill', path.join(projectRoot, 'entry/entry-server.js')],
    output: {
        libraryTarget: 'commonjs2',
        path: path.join(projectRoot, 'dist'),
        filename: 'bundle.server.js',
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: projectRoot,
                exclude: /node_modules/,
                options: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    },
    plugins: [],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js'
        }
    }
}

8.打包文件并开启服务器(如下命令),浏览器输入localhost:8080

cnpm run server
node server
image.png
image.png

在此基础上,增加客户端渲染部分
新建 entry>entry-client.js(客户端入口文件)
新建 webpack>webpack.client.js(客户端配置文件)

/* entry-client.js */
import { createApp } from '../src/main'

const app = createApp()

// 绑定app根元素
window.onload = function() {
       app.$mount('#app')
}
/* webpack.client.js */
const path = require('path');
const projectRoot = path.resolve(__dirname, '..');

module.exports = {
    entry: ['babel-polyfill', path.join(projectRoot, 'entry/entry-client.js')],
    output: {
        path: path.join(projectRoot, 'dist'),
        filename: 'bundle.client.js',
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: projectRoot,
                exclude: /node_modules/,
                options: {
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.esm.js'
        }
    }
};

更改server.js文件

const exp = require('express')
const express = exp()
const renderer = require('vue-server-renderer').createRenderer()
const createApp = require('./dist/bundle.server.js')['default']

// 设置静态文件目录
express.use('/', exp.static(__dirname + '/dist'))

const clientBundleFileUrl = '/bundle.client.js'

// 响应路由请求
express.get('*', (req, res) => {
    const context = { url: req.url }

    // 创建vue实例,传入请求路由信息(head里面添加脚本,用于引入单页面应用)
    createApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) { return res.state(500).end('运行时错误') }
            res.send(`
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Vue2.0 SSR渲染页面</title>
                        <script src="${clientBundleFileUrl}"></script>
                    </head>
                    <body>
                        <div id="app">${html}</div>
                    </body>
                </html>
            `)
        })
    }, err => {
        if(err.code === 404) { res.status(404).end('所请求的页面不存在') }
    })
})

// 服务器监听地址
express.listen(8080, () => {
    console.log('服务器已启动!')
})

更改app.vue,添加路由

<template>
    <div>
        <h2>欢迎来到SSR渲染页面</h2>
        <router-link to="/home">home</router-link>
        <router-link to="/animal">animal</router-link>
        <router-link to="/people">people</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

打包开启服务,并在浏览器输入地址localhost:8080

cnpm run server
cnpm run client
node server
image.png

当点击切换路由时,浏览器并未再次请求服务器,一切都在本地完成

项目三

基于项目二的基础上进行添加动态从服务器获取数据

1.修改entry.server.js文件。
增加一个Promise.all函数,遍历请求下的组件,看是否含有serverRequest函数来判断是否需要服务端请求数据,若需要则执行此函数并传入一个store参数

// entry.server.js
import { createApp } from '../src/main'

export default context => {
    return new Promise((resolve, reject) => {
        const app = createApp()

        // 更改路由
        app.$router.push(context.url)

        // 获取相应路由下的组件
        const matchedComponents = app.$router.getMatchedComponents()

        // 如果没有组件,说明该路由不存在,报错404
        if (!matchedComponents.length) { return reject({ code: 404 }) }

        // 遍历路由下所以的组件,如果有需要服务端渲染的请求,则进行请求
        Promise.all(matchedComponents.map(component => {
            if (component.serverRequest) {
                return component.serverRequest(app.$store)
            }
        })).then(() => {
            resolve(app)
        }).catch(reject)
    })

}

2.创建store.js文件,通过axios来发起请求

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default function createStore() {
      let store =  new Vuex.Store({
            state: {
                  homeInfo: ''
            },
            actions: {
                  getHomeInfo({ commit }) {
                        return axios.get('http://localhost:8080/api/getHomeInfo').then((res) => {
                              commit('setHomeInfo', res.data)
                        })
                  }
            },
            mutations: {
                  setHomeInfo(state, res) {
                        state.homeInfo = res
                  }
            }
      })

      return store
}

3.修改main.js文件,将store引入vue实例

import Vue from 'vue'
import createRouter from './route.js'
import App from './App.vue'
import createStore from './store'

// 导出一个工厂函数,用于创建新的vue实例
export function createApp() {
    const router = createRouter()
    const store = createStore()
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    })

    return app
}

4.修改server.js,增加请求接口

const exp = require('express')
const express = exp()
const renderer = require('vue-server-renderer').createRenderer()
const createApp = require('./dist/bundle.server.js')['default']

// 设置静态文件目录
express.use('/', exp.static(__dirname + '/dist'))

// 客户端打包地址
const clientBundleFileUrl = '/bundle.client.js'

// getHomeInfo请求
express.get('/api/getHomeInfo', (req, res) => {
    res.send('SSR发送请求')
})

// 响应路由请求
express.get('*', (req, res) => {
    const context = { url: req.url }

    // 创建vue实例,传入请求路由信息
    createApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) { return res.state(500).end('运行时错误') }
            res.send(`
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Vue2.0 SSR渲染页面</title>
                        <script src="${clientBundleFileUrl}"></script>
                    </head>
                    <body>
                        <div id="app">${html}</div>
                    </body>
                </html>
            `)
        })
    }, err => {
        if(err.code === 404) { res.status(404).end('所请求的页面不存在') }
    })
})

// 服务器监听地址
express.listen(8080, () => {
    console.log('服务器已启动!')
})

5.修改home.vue文件

<!-- home.vue -->
<template>
  <div>
    home
    <div>{{ homeInfo }}</div>
</div>
</template>

<script>
    export default {
        serverRequest(store) {
            return store.dispatch('getHomeInfo')
        },
        computed: {
            homeInfo() {
              return this.$store.state.homeInfo
          }
      }
  }
</script>

<style scoped>

</style>

6.编译并运行(localhost:8080)

cnpm run server
cnpm run client
node server
运行结果.png

请求结果.png

服务端和客户端是两个vue实例各自进行自己的渲染,然后拼接在一起的。
通过serverRequest发出的请求只有在服务端的vue实例可以拿到这个store数据
客户端的vue实例是拿不到的

请求返回的html文件中,是有'SSR发送请求的'字样的,但是页面为什么不显示?
这是因为客户端的vue实例脚本加载成功后,homeInfo被客户端的homeInfo属性覆盖,而客户端的homeInfo是没有值的,是个空属性,因此不显示

如何解决上述问题呢?

1.修改server.js
新加一个script标签,创建一个全局对象,值是state的值,将服务器端请求得出的结果传给客户端
<script>window.INITIAL_STATE = ${state}</script>

// server.js
const exp = require('express')
const express = exp()
const renderer = require('vue-server-renderer').createRenderer()
const createApp = require('./dist/bundle.server.js')['default']

// 设置静态文件目录
express.use('/', exp.static(__dirname + '/dist'))

const clientBundleFileUrl = '/bundle.client.js'

// getHomeInfo请求
express.get('/api/getHomeInfo',(req,res)=>{
    res.send('SSR发送请求')
})

// 响应路由请求
express.get('*', (req, res) => {
    const context = { url: req.url }

    /* 创建vue实例,传入请求路由信息
            新加一个script标签,创建一个全局对象,值是state的值,将服务器端请求得出的结果传给客户端
            head里面添加脚本,用于引入单页面应用,<script src="${clientBundleFileUrl}"></script>
    */
    createApp(context).then(app => {
        let state = JSON.stringify(context.state)

        renderer.renderToString(app, (err, html) => {
            if (err) { return res.state(500).end('运行时错误') }
            res.send(`
                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Vue2.0 SSR渲染页面</title>
                        <script>window.__INITIAL_STATE__ = ${state}</script>
                        <script src="${clientBundleFileUrl}"></script>
                    </head>
                    <body>
                        <div id="app">${html}</div>
                    </body>
                </html>
            `)
        })
    }, err => {
        if(err.code === 404) { res.status(404).end('所请求的页面不存在') }
    })
})

// 服务器监听地址
express.listen(8080, () => {
    console.log('服务器已启动!')
})

2.修改entry-client.js文件

/* entry-client.js */
import { createApp } from '../src/main'

const app = createApp()

// 同步服务端信息
if(window.__INITIAL_STATE__){
    app.$store.replaceState(window.__INITIAL_STATE__)
}

// 绑定app根元素
window.onload = function() {
       app.$mount('#app')
}

3.编译并运行

image.png

综上,项目三已经实现了完整的服务端渲染项目

项目四

类似于官方提供的demo,只不过内容源换成了掘金

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,635评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,628评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,971评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,986评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,006评论 6 394
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,784评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,475评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,364评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,860评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,829评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,490评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2 356

推荐阅读更多精彩内容