entry-client.js 和 entry-server.jsentry-client.js 和 entry-server.jsentry-client.js 和 entry-server.js经过上面的流程梳理我们知道了当访问一个 vue-ssr 的整个流程: 访问 web 服务器地址 > 执行 renderer.renderToString(context) 解析已经打包的 bunlde 返回 html 字符串 > 在客户端激活这些静态的 html,使它们成为动态的。接下来我们需要看看 entry-client.js 和 entry-server.js 做了什么。entry-server.js entry-server.js

这里的 context 就是 renderer.renderToString(context) 传递的值，至于你想传递什么是你在 web 服务器中自定义的，可以传递任何你想给客户端的值。

这里我们可以通过 context 来获取到客户端返回 web 服务器的地址，通过 context.url (需要你在服务端传递该值)获取到该路径，并且通过 router.push(context.url) 实例来访问相同的路径。

context.url 对应的组件中会定义一个 asyncData 的静态方法，并且将服务端存储在 store 的值传递给该方法。

将 store 中的值存储给 context.state ,context.state 将作为 window. INITIAL_STATE 状态，自动嵌入到最终的 HTML 中。就是一个全局变量。
这里的 context 就是 renderer.renderToString(context) 传递的值，至于你想传递什么是你在 web 服务器中自定义的，可以传递任何你想给客户端的值。这里我们可以通过 context 来获取到客户端返回 web 服务器的地址，通过 context.url (需要你在服务端传递该值)获取到该路径，并且通过 router.push(context.url) 实例来访问相同的路径。context.url 对应的组件中会定义一个 asyncData 的静态方法，并且将服务端存储在 store 的值传递给该方法。将 store 中的值存储给 context.state ,context.state 将作为 window. INITIAL_STATE 状态，自动嵌入到最终的 HTML 中。就是一个全局变量。INITIAL_STATE
import { createApp } from './app'

export default context => {
// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
// 以便服务器能够等待所有的内容在渲染前，
// 就已经准备就绪。
return new Promise((resolve, reject) => {
const { app, router,store } = createApp()

// 设置服务器端 router 的位置
router.push(context.url)
// 等到 router 将可能的异步组件和钩子函数解析完
router.onReady(() => {

const matchedComponents = router.getMatchedComponents()

// 匹配不到的路由，执行 reject 函数，并返回 404

if (!matchedComponents.length) {

return reject({ code: 404 })

}

// 对所有匹配的路由组件调用 asyncData

// Promise.all([p1,p2,p3])

const allSyncData = matchedComponents.map(Component => {

if(Component.asyncData) {

return Component.asyncData({

store,route:router.currentRoute

})

}

})

Promise.all(allSyncData).then(() => {

// 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态，自动嵌入到最终的 HTML 中。

context.state = store.state

resolve(app)

}).catch(reject)
}, reject)
})
}
import { createApp } from './app'

export default context => {
// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
// 以便服务器能够等待所有的内容在渲染前，
// 就已经准备就绪。
return new Promise((resolve, reject) => {
const { app, router,store } = createApp()

// 设置服务器端 router 的位置
router.push(context.url)
// 等到 router 将可能的异步组件和钩子函数解析完
router.onReady(() => {

const matchedComponents = router.getMatchedComponents()

// 匹配不到的路由，执行 reject 函数，并返回 404

if (!matchedComponents.length) {

return reject({ code: 404 })

}

// 对所有匹配的路由组件调用 asyncData

// Promise.all([p1,p2,p3])

const allSyncData = matchedComponents.map(Component => {

if(Component.asyncData) {

return Component.asyncData({

store,route:router.currentRoute

})

}

})

Promise.all(allSyncData).then(() => {

// 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态，自动嵌入到最终的 HTML 中。

context.state = store.state

resolve(app)

}).catch(reject)
}, reject)
})
}entry-client.js entry-client.js 执行匹配到的组件中定义的 asyncData 静态方法，将 store 中的值取出来作为客户端的数据。
import { createApp } from './app'
// 你仍然需要在挂载 app 之前调用 router.onReady，因为路由器必须要提前解析路由配置中的异步组件，才能正确地调用组件中可能存在的路由钩子。
const { app,router,store } = createApp()

if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
// 使用 `router.beforeResolve()`，以便确保所有异步组件都 resolve。
router.beforeResolve((to,from,next) => {
const matched = router.getMatchedComponents(to)
const prevMatched = router.getMatchedComponents(from)

// 我们只关心非预渲染的组件
// 所以我们对比它们，找出两个匹配列表的差异组件
let diffed = false
const activated = matched.filter((c, i) => {

return diffed || (diffed = (prevMatched[i] !== c))
})
if (!activated.length) {

return next()
}
Promise.all(activated.map(c => {

if (c.asyncData) {

return c.asyncData({ store, route: to })

}
})).then(() => {

next()
}).catch(next)
})
app.$mount('#app')
})
import { createApp } from './app'
// 你仍然需要在挂载 app 之前调用 router.onReady，因为路由器必须要提前解析路由配置中的异步组件，才能正确地调用组件中可能存在的路由钩子。
const { app,router,store } = createApp()

if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}

router.onReady(() => {
// 使用 `router.beforeResolve()`，以便确保所有异步组件都 resolve。
router.beforeResolve((to,from,next) => {
const matched = router.getMatchedComponents(to)
const prevMatched = router.getMatchedComponents(from)

// 我们只关心非预渲染的组件
// 所以我们对比它们，找出两个匹配列表的差异组件
let diffed = false
const activated = matched.filter((c, i) => {

return diffed || (diffed = (prevMatched[i] !== c))
})
if (!activated.length) {

return next()
}
Promise.all(activated.map(c => {

if (c.asyncData) {

return c.asyncData({ store, route: to })

}
})).then(() => {

next()
}).catch(next)
})
app.$mount('#app')
})构建配置构建配置构建配置 webpack.base.config.jswebpack.base.config.js服务端和客户端相同的配置一些通用配置，和我们平时使用的 webpack 配置相同，截取部分展示
module.exports = {
mode:isProd ? 'production' : 'development',
devtool: isProd
? false
: '#cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
filename: '[name].[chunkhash].js'
},
module: {
rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

compilerOptions: {

preserveWhitespace: false

}

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'url-loader',

options: {

limit: 10000,

name: '[name].[ext]?[hash]'

}

},

{

test: /\.styl(us)?$/,

use: isProd

? ExtractTextPlugin.extract({

use: [

{

loader: 'css-loader',

options: { minimize: true }

},

'stylus-loader'

],

fallback: 'vue-style-loader'

})

: ['vue-style-loader', 'css-loader', 'stylus-loader']

},
]
},
plugins: [

new VueLoaderPlugin()

]
}
module.exports = {
mode:isProd ? 'production' : 'development',
devtool: isProd
? false
: '#cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
filename: '[name].[chunkhash].js'
},
module: {
rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

compilerOptions: {

preserveWhitespace: false

}

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'url-loader',

options: {

limit: 10000,

name: '[name].[ext]?[hash]'

}

},

{

test: /\.styl(us)?$/,

use: isProd

? ExtractTextPlugin.extract({

use: [

{

loader: 'css-loader',

options: { minimize: true }

},

'stylus-loader'

],

fallback: 'vue-style-loader'

})

: ['vue-style-loader', 'css-loader', 'stylus-loader']

},
]
},
plugins: [

new VueLoaderPlugin()

]
}client.config.jsclient.config.js
const webpack = require('webpack')
const {merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const path = require('path')
module.exports = merge(baseConfig,{
entry:path.resolve('__dirname','../entry-client.js'),
plugins:[
// 生成 `vue-ssr-client-manifest.json`。
new VueSSRClientPlugin()
]
})
const webpack = require('webpack')
const {merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const path = require('path')
module.exports = merge(baseConfig,{
entry:path.resolve('__dirname','../entry-client.js'),
plugins:[
// 生成 `vue-ssr-client-manifest.json`。
new VueSSRClientPlugin()
]
})server.config.jsserver.config.js
const { merge } = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const path = require('path')
module.exports = merge(baseConfig,{
entry:path.resolve('__dirname','../entry-server.js'),
target:'node',
devtool:'source-map',
// 告知 server bundle 使用 node 风格导出模块
output:{
libraryTarget:'commonjs2'
},
externals: nodeExternals({
allowlist:/\.css$/
}),
plugins:[
new VueSSRServerPlugin()
]
})
const { merge } = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const path = require('path')
module.exports = merge(baseConfig,{
entry:path.resolve('__dirname','../entry-server.js'),
target:'node',
devtool:'source-map',
// 告知 server bundle 使用 node 风格导出模块
output:{
libraryTarget:'commonjs2'
},
externals: nodeExternals({
allowlist:/\.css$/
}),
plugins:[
new VueSSRServerPlugin()
]
})开发环境配置开发环境配置开发环境配置webpack 提供 node api可以在 node 运行时使用。修改 server.js修改 server.jsserver.js 作为 web 服务器的入口文件，我们需要判断当前运行的环境是开发环境还是生产环境。
const isProd = process.env.NODE_ENV === 'production'
async function prdServer(ctx) {
// ...生产环境去读取 dist/ 下的 bundle 文件
}
async function devServer(ctx){
// 开发环境
}
router.get('/home',isProd ? prdServer : devServer)
app.use(router.routes())
app.listen(4000,()=>{
console.log('listen 4000')
})
const isProd = process.env.NODE_ENV === 'production'
async function prdServer(ctx) {
// ...生产环境去读取 dist/ 下的 bundle 文件
}
async function devServer(ctx){
// 开发环境
}
router.get('/home',isProd ? prdServer : devServer)
app.use(router.routes())
app.listen(4000,()=>{
console.log('listen 4000')
})dev-server.jsdev-server.js生产环境中是通过读取内存中 dist/ 文件夹下的 bundle 来解析生成 html 字符串的。在开发环境中我们该怎么拿到 bundle 文件呢？

webpack function 读取 webpack 配置来获取编译后的文件

memory-fs 来读取内存中的文件

koa-webpack-dev-middleware 将 bundle 写入内存中，当客户端文件发生变化可以支持热更新
webpack function 读取 webpack 配置来获取编译后的文件memory-fs 来读取内存中的文件koa-webpack-dev-middleware 将 bundle 写入内存中，当客户端文件发生变化可以支持热更新 webpack 函数使用webpack 函数使用导入的 webpack 函数会将 配置对象 传给 webpack，如果同时传入回调函数会在 webpack compiler 运行时被执行:• 方式一：添加回调函数
const webpackConfig = {
// ...配置项
}
const callback = (err,stats) => {}
webpack(webpackConfig, callback)
const webpackConfig = {
// ...配置项
}
const callback = (err,stats) => {}
webpack(webpackConfig, callback)err对象 不包含 编译错误，必须使用 stats.hasErrors() 单独处理，文档的 错误处理 将对这部分将对此进行详细介绍。err 对象只包含 webpack 相关的问题，例如配置错误等。方式二：得到一个 compiler 实例你可以通过手动执行它或者为它的构建时添加一个监听器，compiler 提供以下方法compiler.run(callback)compiler.watch(watchOptions,handler) 启动所有编译工作
const webpackConfig = {
// ...配置项
}
const compiler = webpack(webpackConfig)
const webpackConfig = {
// ...配置项
}
const compiler = webpack(webpackConfig)客户端配置客户端配置
const clientCompiler = webpack(clientConfig)

const devMiddleware = require('koa-webpack-dev-middleware')(clientCompiler,{

publicPath:clientConfig.output.publicPath,

noInfo:true,

stats:{

colors:true

}

})


app.use(devMiddleware)

// 编译完成时触发

clientCompiler.hooks.done.tap('koa-webpack-dev-middleware', stats => {

stats = stats.toJson()

stats.errors.forEach(err => console.error(err))

stats.warnings.forEach(err => console.warn(err))

if (stats.errors.length) return

clientManifest = JSON.parse(readFile(

devMiddleware.fileSystem,

'vue-ssr-client-manifest.json'

))

update()

})
const clientCompiler = webpack(clientConfig)

const devMiddleware = require('koa-webpack-dev-middleware')(clientCompiler,{

publicPath:clientConfig.output.publicPath,

noInfo:true,

stats:{

colors:true

}

})


app.use(devMiddleware)

// 编译完成时触发

clientCompiler.hooks.done.tap('koa-webpack-dev-middleware', stats => {

stats = stats.toJson()

stats.errors.forEach(err => console.error(err))

stats.warnings.forEach(err => console.warn(err))

if (stats.errors.length) return

clientManifest = JSON.parse(readFile(

devMiddleware.fileSystem,

'vue-ssr-client-manifest.json'

))

update()

})默认情况下，webpack 使用普通文件系统来读取文件并将文件写入磁盘。但是，还可以使用不同类型的文件系统（内存(memory), webDAV 等）来更改输入或输出行为。为了实现这一点，可以改变 inputFileSystem 或 outputFileSystem。例如，可以使用 memory-fs 替换默认的 outputFileSystem，以将文件写入到内存中。koa-webpack-dev-middleware 内部就是用 memory-fs 来替换 webpack 默认的 outputFileSystem 将文件写入内存中的。读取内存中的 vue-ssr-client-mainfest.json调用 update 封装好的更新方法服务端配置服务端配置服务端配置读取内存中的vue-ssr-server-bundle.json文件调用 update 封装好的更新方法
// hot middleware

app.use(require('koa-webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))

// watch and update server renderer

const serverCompiler = webpack(serverConfig)

serverCompiler.outputFileSystem = mfs

serverCompiler.watch({}, (err, stats) => {

if (err) throw err

stats = stats.toJson()

if (stats.errors.length) return


// read bundle generated by vue-ssr-webpack-plugin

bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))

update()

})
// hot middleware

app.use(require('koa-webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))

// watch and update server renderer

const serverCompiler = webpack(serverConfig)

serverCompiler.outputFileSystem = mfs

serverCompiler.watch({}, (err, stats) => {

if (err) throw err

stats = stats.toJson()

if (stats.errors.length) return


// read bundle generated by vue-ssr-webpack-plugin

bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))

update()

})update 方法
const update = async () => {

if(bundle && clientManifest) {

const renderer = createRenderer(bundle,{

template:require('fs').readFileSync(templatePath,'utf-8'),

clientManifest

})

// 自定义上下文

html = await renderer.renderToString({url:ctx.url,title:'这里是标题'})

ready()

}

}
const update = async () => {

if(bundle && clientManifest) {

const renderer = createRenderer(bundle,{

template:require('fs').readFileSync(templatePath,'utf-8'),

clientManifest

})

// 自定义上下文

html = await renderer.renderToString({url:ctx.url,title:'这里是标题'})

ready()

}

}总结本文将自己理解的 vue-ssr 构建过程做了梳理，