安裝
npm install vue vue-server-renderer --save
構(gòu)建配置
服務(wù)端
onst 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')
module.exports = merge(baseConfig, {
// 將 entry 指向應(yīng)用程序的 server entry 文件
entry: '/path/to/entry-server.js',
// 這允許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態(tài)導(dǎo)入(dynamic import),
// 并且還會在編譯 Vue 組件時定页,
// 告知 `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'
},
// 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òu)建為單個 JSON 文件的插件警儒。
// 默認(rèn)文件名為 `vue-ssr-server-bundle.json`
plugins: [
new VueSSRServerPlugin()
]
})
const { createBundleRenderer } = require('vue-server-renderer')
//引入生成的vue-ssr-server-bundle.json文件
const serverBundle = require('/path/to/vue-ssr-server-bundle.json')
const clientManifest = require('/path/to/vue-ssr-client-manifest.json')
//自動注入
const renderer = createBundleRenderer(serverBundle , {
template,
clientManifest
})
server.get('*', (req, res) => {
const context = { url: req.url }
// 這里無需傳入一個應(yīng)用程序,因為在執(zhí)行 bundle 時已經(jīng)自動創(chuàng)建過眶根。
// 現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦蜀铲!
renderer.renderToString(context, (err, html) => {
// 處理異常……
res.end(html)
})
})
//手動注入 可以使用任意模板 這里使用ejs
const renderer = createBundleRenderer(serverBundle , {
inject:false,
clientManifest
})
const context = { url: req.url }
/*
下面context會暴露出renderStyles()属百、renderState(options?: Object)记劝、renderScripts()、
renderResourceHints()诸老、getPreloadFiles()這幾種方法
*/
const appString=await renderer.renderToString(context)
const html=ejs.render(template,{
appString,
style:context.renderStyles(),
scripts:context.renderScripts()
})
客戶端
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
module.exports = merge(baseConfig, {
entry: '/path/to/entry-client.js',
plugins: [
// 此插件在輸出目錄中
// 生成 `vue-ssr-client-manifest.json`隆夯。
new VueSSRClientPlugin()
]
})
源碼結(jié)構(gòu)
//app.js
import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)出一個工廠函數(shù),用于創(chuàng)建新的
// 應(yīng)用程序别伏、router 和 store 實例
export function createApp () {
const app = new Vue({
// 根實例簡單的渲染應(yīng)用程序組件蹄衷。
render: h => h(App)
})
return { app }
}
//entry-client.js
import { createApp } from './app'
// 客戶端特定引導(dǎo)邏輯……
const { app } = createApp()
// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')
//entry-server.js
import { createApp } from './app'
export default context => {
const { app } = createApp()
return app
}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者