前言
本文章重點在于代碼實踐，從零開始完整的展示如何建構項目。
下午看了很多相關資料，但是講解的着重于理論，或者直接給出github倉庫連結，也有的隻列出幾條重點，看完還是不知道如何實踐。
前後端項目結構差別
-
front-end
平時大家編寫vue項目，一般都是使用
vue-cli
npm run build
完成生産環境的打包，丢到伺服器上即可，簡直不要太省心。
我估計以上的開發模式在目前是占據相當一部分比重的，vue-cli友善大家的同時，也造成很多開發者(一般是初入門者)對内部原理缺乏認知，對webpack配置不甚了解。在此建議大家對vue-cli生成的項目結構進行分析，網上也有很多分析文章，然後試着自己搭建腳手架，加深了解。
-
back-end
提到伺服器端渲染，涉及node服務，可能有一部分前端會覺得偏離了自己的方向，然而，作為一名程式員，真的建議大家不要把自己局限在一個方向。js現在異常活躍，pc端、移動端、桌面端、後端、硬體端(嵌入式)都可以看到它的身影，前端也逐漸發展為大前端。
在此以node項目為例子，做簡單說明。(node水準不高，若有錯誤，歡迎指正)
node項目的初始化和自己搭建一個前端腳手架并沒有太多差別，區分點主要有以下幾點：
- node項目的入口檔案是js，前端項目是html
- node項目中可以引用node的相關依賴，而前端項目不可以
- 原形畢露，後續補充...
搭建一個最簡單的伺服器項目
在此使用express架構。
## 以desktop為根目錄
## 建立項目檔案夾
mkdir simple-demo
## 進入項目根目錄
cd simple-demo
## 項目初始化
npm init
## 根據指令提示完成相關配置即可
## 安裝express依賴
npm install express -save
## 或者使用yarn安裝(兩種方式任選其一)
yarn add express
## 建立server.js
touch server.js
server.js
const express = require('express');
const server = express();
server.get('/', (req, res) => {
res.send('<h1>hello world</h1>')
})
server.listen(8080);
結果
## 執行以下指令
node server.js
浏覽器輸入localhost:8080
express.png
伺服器端渲染基本用法
以上述simple-demo為基礎
## 安裝依賴(NPM、Yarn)
npm install vue vue-server-renderer --save
增加app.js檔案
// 第 1 步：建立一個 Vue 執行個體
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 執行個體渲染為 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
在項目根目錄執行
node app.js
render-1.png
render原理
在node項目中，使用
vue-server-renderer
插件将vue執行個體渲染為HTML。
與伺服器內建
将上述項目simple-demo中的server.js内容清空，并更改為以下内容。
const Vue = require('vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: '<div>通路的url是{{url}}</div>'
});
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.setHeader('Content-Type','text/html;charset=UTF-8'); // 避免亂碼
res.end(`
<!DOCTYPE html>
<html >
<head>
<title>Hello</title>
</head>
<body>
${html}
</body>
</html>
`);
});
})
server.listen(8080);
執行指令
node server.js
注:
/index
是我随意輸入的url，從
/
開始之後都是
req.url
的值。
render-2.png
到此為止，已經使用node伺服器将vue執行個體渲染為HTML，并在浏覽器中展示出來了。
使用頁面模闆
上一個環節，我們在res.end中将vue渲染成的HTML标記和HTML頁面包裹容器拼接在了一起。為了簡化這些操作，我們可以直接建立一個頁面模闆。
index.template.html
注： ``注釋是必須的，否則在終端啟動伺服器的時候，會提示
Content placeholder not found in template
。
<!DOCTYPE html>
<html >
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
建立server-2.js
通過
fs
子產品讀取并應用模闆檔案。詳細源碼請參考
dev_1
分支的
server-2.js
檔案
const renderer = require('vue-server-renderer').createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
});
執行
node server-2.js
，得到以下結果(和上一步相同):
render-3.png
模闆插值
上一個環節，模闆是固定的，在這一步我們将通過模闆插值，來配置模闆。
增加模闆檔案mustache.template.html
<!DOCTYPE html>
<html>
<head>
<!-- 使用雙花括号(double-mustache)進行 HTML 轉義插值(HTML-escaped interpolation) -->
<title>{{ title }}</title>
<!-- 使用三花括号(triple-mustache)進行 HTML 不轉義插值(non-HTML-escaped interpolation) -->
{{{ meta }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
建立server-3.js，詳細源碼請參考
dev_1
分支的
server-3.js
檔案
const context = {
title: 'hello',
meta: `
<meta charset='utf-8'>
`
}
renderer.renderToString(app, context, (err, html) => {
// page title will be "Hello"
// with meta tags injected
})
執行
node server-3.js
，得到以下結果，插值已生效:
renderer-3.png
服務端渲染和浏覽器端渲染
仔細觀察網頁源碼，可以看到服務端渲染的頁面，body中是有html标記的。
而通過vue-cli編寫的項目，在浏覽器端渲染後，body中是空的，html标記是通過js插入的。
搜尋引擎爬蟲抓取工具是通過抓取頁面内容來進行資訊收集的，而在浏覽器端渲染的SPA項目，頁面内容是空的，這就是為什麼SPA項目SEO很糟糕的原因。
參考
Vue.js 伺服器端渲染指南
作者：回調的幸福時光
連結：https://www.jianshu.com/p/e810cb90fc33
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。