前言
現(xiàn)在Vue的ssr方案,在我了解到的有如下幾種:
- vue-server-renderer服務(wù)端渲染
- prerender-spa-plugin客戶端的靜態(tài)頁面生成
- Nuxt.js 一個(gè)vue的服務(wù)端渲染框架,容易上手。
本文主要參考vue官網(wǎng)的ssr文檔,研究學(xué)習(xí),其中代碼比較碎片,所以自己整理出來并且運(yùn)行成功。
vue ssr官網(wǎng)文檔
package.json
{
"name": "ssr-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack --config ./build/webpack.server.conf.js",
"client": "webpack --config ./build/webpack.client.conf.js"
},
"author": "lanfeng",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.26.0",
"express": "^4.16.3",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.17"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"style-loader": "^0.23.0",
"vue-loader": "^11.1.4", // 這個(gè)地方有一個(gè)坑,最新版本是15以上,剛開始用的時(shí)候生成的js好像有些問題,以后再驗(yàn)證怎么解決
"vue-template-compiler": "^2.5.17",
"webpack": "^3.6.0",
"webpack-merge": "^4.1.4",
"webpack-node-externals": "^1.7.2"
}
}
項(xiàng)目結(jié)構(gòu)
圖1
build&entry
在ssr指南中,主要是構(gòu)建配置這一塊代碼有小部分缺失,所以在這里主要指出配置模塊詳細(xì)代碼
webpack.base.config.js
module.exports = {
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
webpack.server.conf.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');
const root= path.resolve(__dirname, '..');
module.exports = merge(baseConfig, {
// 將 entry 指向應(yīng)用程序的 server entry 文件
entry: path.join(root, 'entry/entry-server.js'),
// 這允許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態(tài)導(dǎo)入(dynamic import),
// 并且還會在編譯 Vue 組件時(shí),
// 告知 `vue-loader` 輸送面向服務(wù)器代碼(server-oriented code)。
target: 'node',
// 對 bundle renderer 提供 source map 支持
devtool: 'source-map',
// 此處告知 server bundle 使用 Node 風(fēng)格導(dǎo)出模塊(Node-style exports)
output: {
libraryTarget: 'commonjs2',
path: path.join(root, 'dist'),
filename: 'bundle.server.js'
},
// https://webpack.js.org/configuration/externals/#function
// https://github.com/liady/webpack-node-externals
// 外置化應(yīng)用程序依賴模塊。可以使服務(wù)器構(gòu)建速度更快,
// 并生成較小的 bundle 文件。
externals: nodeExternals({
// 不要外置化 webpack 需要處理的依賴模塊。
// 你可以在這里添加更多的文件類型。例如,未處理 *.vue 原始文件,
// 你還應(yīng)該將修改 `global`(例如 polyfill)的依賴模塊列入白名單
whitelist: /\.css$/
}),
// 這是將服務(wù)器的整個(gè)輸出
// 構(gòu)建為單個(gè) JSON 文件的插件。
// 默認(rèn)文件名為 `vue-ssr-server-bundle.json`
plugins: [
new VueSSRServerPlugin()
]
})
webpack.client.conf.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const path = require('path');
const root= path.resolve(__dirname, '..');
module.exports = merge(baseConfig, {
entry: path.join(root, 'entry/entry-client.js'),
output: {
path: path.join(root, 'dist'),
filename: 'bundle.client.js'
},
plugins: [
// 重要信息:這將 webpack 運(yùn)行時(shí)分離到一個(gè)引導(dǎo) chunk 中,
// 以便可以在之后正確注入異步 chunk。
// 這也為你的 應(yīng)用程序/vendor 代碼提供了更好的緩存。
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: 'manifest.js',
minChunks: Infinity
}),
// 此插件在輸出目錄中
// 生成 `vue-ssr-client-manifest.json`。
new VueSSRClientPlugin()
]
})
entry-server.js
/* entry-server.js */
import { createApp } from '../src/app'
export default context => {
return new Promise((resolve, reject) => {
const {app, router} = createApp()
// 更改路由
router.push(context.url)
// 等到 router 將可能的異步組件和鉤子函數(shù)解析完
router.onReady(() => {
const matchedComponents = app.$router.getMatchedComponents()
// 匹配不到的路由,執(zhí)行 reject 函數(shù),并返回 404
if (!matchedComponents.length) { return reject({code: 404}) }
// Promise 應(yīng)該 resolve 應(yīng)用程序?qū)嵗员闼梢凿秩? resolve(app)
}, reject)
})
}
entry-client.js
import { createApp } from '../src/app'
// 客戶端特定引導(dǎo)邏輯……
const {app} = createApp()
// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
基本上配置就是這樣子了。其他就可以參考官方的代碼例子。構(gòu)建這塊就沒有問題,最后就是server.js
server.js
/* server.js */
const path = require('path')
const express = require('express')
const app = express()
const { createBundleRenderer } = require('vue-server-renderer')
// 創(chuàng)建renderer
const template = require('fs').readFileSync('./index.ssr.html', 'utf-8')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json') // 這個(gè)可以動態(tài)將生成的js文件渲染到html模版中
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false, // 推薦
template: template,
clientManifest: clientManifest
})
app.use(express.static(path.join(__dirname, 'dist')))
// 響應(yīng)路由請求
app.get('*', (req, res) => {
const context = { url: req.url }
// 創(chuàng)建vue實(shí)例,傳入請求路由信息
renderer.renderToString(context, (err, html) => {
if (err) {
return res.state(500).end('運(yùn)行時(shí)錯(cuò)誤')
}
res.send(html)
})
})
// 服務(wù)器監(jiān)聽地址
app.listen(8099, () => {
console.log('服務(wù)器已啟動!')
})
總結(jié)
基本上到這個(gè)地方關(guān)鍵性構(gòu)建以及服務(wù)模塊代碼補(bǔ)充完成。一個(gè)簡單的基于vue-server-renderer例子就可以運(yùn)行起來。