vuessr 服務(wù)器端渲染

安裝

npm install vue vue-server-renderer --save

構(gòu)建配置

服務(wù)端

  • webpack配置
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()
  ]
})
  • server
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()
    })

客戶端

  • webpack配置
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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市厘肮,隨后出現(xiàn)的幾起案子愧口,更是在濱河造成了極大的恐慌,老刑警劉巖类茂,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耍属,死亡現(xiàn)場離奇詭異托嚣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)厚骗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門示启,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人领舰,你說我怎么就攤上這事夫嗓。” “怎么了冲秽?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵舍咖,是天一觀的道長。 經(jīng)常有香客問我锉桑,道長排霉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任民轴,我火速辦了婚禮攻柠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘后裸。我一直安慰自己辙诞,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布轻抱。 她就那樣靜靜地躺著,像睡著了一般旦部。 火紅的嫁衣襯著肌膚如雪祈搜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天士八,我揣著相機(jī)與錄音容燕,去河邊找鬼。 笑死婚度,一個胖子當(dāng)著我的面吹牛蘸秘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蝗茁,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼醋虏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了哮翘?” 一聲冷哼從身側(cè)響起颈嚼,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎饭寺,沒想到半個月后阻课,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叫挟,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年限煞,在試婚紗的時候發(fā)現(xiàn)自己被綠了抹恳。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡署驻,死狀恐怖奋献,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情硕舆,我是刑警寧澤秽荞,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站抚官,受9級特大地震影響扬跋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜凌节,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一钦听、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧倍奢,春花似錦朴上、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至畔裕,卻和暖如春衣撬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背扮饶。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工具练, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人甜无。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓扛点,卻偏偏與公主長得像,于是被迫代替她去往敵國和親岂丘。 傳聞我的和親對象是個殘疾皇子陵究,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容