想到要學習vue-ssr的同學，自不必多說，一定是熟悉了vue，並且多多少少做過幾個項目。然后學習vue服務端渲染無非解決首屏渲染的白屏問題以及SEO友好。
話不多說，筆者也是研究多日才搞明白這個服務端渲染到底是雜么回事！！！
一，首先實現下官網的基本案例
隨便建一個目錄，然后執行npm init初始化項目，生成工程文件package.json；創建server.js；然后按照vue-ssr官方鏈接：https://ssr.vuejs.org/zh/basic.html教程里面介紹的server.js，復制教程里面代碼，如下
1 const Vue = require('vue') 2 const server = require('express')() 3 const renderer = require('vue-server-renderer').createRenderer() 4 server.get('*', (req, res) => { 5 const app = new Vue({ 6 data: { 7 url: req.url 8 }, 9 template: `<div>訪問的 URL 是： {{ url }}</div>` 10 }) 11 renderer.renderToString(app, (err, html) => { 12 if (err) { 13 res.status(500).end('Internal Server Error') 14 return 15 } 16 res.end(` 17 <!DOCTYPE html> 18 <html lang="en"> 19 <head><title>Hello</title></head> 20 <body>${html}</body> 21 </html> 22 `) 23 }) 24 }) 25 server.listen(8080)
顯然需要按照上面引入的依賴vue，express和vue-server-renderer，安裝完畢，在終端執行，node server.js，打開瀏覽器，http://localhost:8080/，不出意外會是亂碼，因為官網的返回的html字符串里面沒有 <meta charset="utf-8">，而加上這個 就好了。
當然還可以引入一個模板文件，同樣是官網的案例，此時的server.js為
1 const Vue = require('vue') 2 const server = require('express')() 3 const renderer = require('vue-server-renderer').createRenderer({ 4 template: require('fs').readFileSync('./index.template.html', 'utf-8') 5 }) 6 server.get('*', (req, res) => { 7 const app = new Vue({ 8 data: { 9 url: req.url 10 }, 11 template: `<div>訪問的 URL 是： {{ url }}</div>` 12 }) 13 renderer.renderToString(app, (err, html) => { 14 if (err) { 15 res.status(500).end('Internal Server Error') 16 return 17 } 18 res.end(html) 19 }) 20 }) 21 server.listen(8080)
模板文件index.template.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head><title>Hello</title></head> 4 <body> 5 <!-- 下面這個注釋必須有 --> 6 <!--vue-ssr-outlet--> 7 </body> 8 </html>
上面注釋根據官網教程，是vue注入的位置標記。然后同樣執行，node server.js就可以了。
是不是很簡單，還可以創建一個對象來改變模板的標題和meta，這個時候的server.js和模板文件代碼分別是
1 const Vue = require('vue') 2 const server = require('express')() 3 const renderer = require('vue-server-renderer').createRenderer({ 4 template: require('fs').readFileSync('./index.template.html', 'utf-8') 5 }) 6 server.get('*', (req, res) => { 7 const context = { 8 title: 'hello', 9 meta: ` 10 <meta ...> 11 <meta ...> 12 `,url:req.url 13 } 14 const app = new Vue({ 15 data: { 16 url: req.url 17 }, 18 template: `<div>訪問的 URL 是： {{ url }}</div>` 19 }) 20 renderer.renderToString(app, context,(err, html) => { 21 if (err) { 22 res.status(500).end('Internal Server Error') 23 return 24 } 25 res.end(html) 26 }) 27 }) 28 server.listen(8080)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>{{title}}</title> 5 {{{meta}}} 6 </head> 7 8 <body> 9 <!-- 下面這個注釋必須有 --> 10 <!--vue-ssr-outlet--> 11 </body> 12 </html>
這里說下我的理解，vue服務端渲染實際是一套代碼的兩次應用，所謂的一套代碼就是拿出server.js外面去的vm實例，上面之所以簡單是因為我們在server內部創建的vm實例，一旦將vm拿出去，在server.js外部引入，那么涉及的就麻煩了。
這里分兩條線說，一個是在server.js外面創建一個app.js；結果是無法引入到server中；而這個也不是關注的重點；
另一條線是使用vue-loader創建一個vm實例，然后引入到server中，整個vue渲染就在解決這個問題，解決引入的問題，解決引入之后與前端混合的問題。下面貼上簡單案例的實現代碼。
因為不能直接應用.vue文件以及外部的js文件，所以需要借助webpack，借助webpack將vue實例，轉譯為node可用代碼，以及對前端代碼進行轉譯。
二，以vue init webpack-simple vuessr0 為基礎的vue-ssr案例
1）用vue-cli也就是vue腳手架建了一個簡單模板，命令：vue init webpack-simple vuessr0，相信對此都比較熟悉，建好后的結構如下
之后改造一下，創建幾個文件app.js,entry-client.js,entry-server.js,創建build目錄，刪除自動生成的webpack.config.js文件，改之后的目錄結構為
各個文件的作用，entry-server.js將vm實例，轉譯為node可用代碼；
entry-client.js和傳統前端處理一致。
好吧，github鏈接地址為：https://github.com/mstzhen/vue-ssr；我實在有點懶了。
需要說明的是，webpack將一份文件打包為兩份，前端入口文件的作用是掛載到id上面，后端入口文件以及后端文件負責注入。
首先安裝依賴：npm install；
然后依次
npm run build:client
npm run build:server
npm run dev
8080端口訪問即可。
最后，本文只是對vue服務端官網最簡單那個實例的實現。沒有使用vue-router，沒有vuex，更沒有服務端數據請求。希望對正在學習vue服務端學習的小伙伴有所幫助。
錯誤之處，請指出。