vue 2.0服务端渲染从零开始(一)
前言
本文章重点在于代码实践，从零开始完整的展示如何构建项目。
下午看了很多相关资料，但是讲解的着重于理论，或者直接给出github仓库链接，也有的只列出几条重点，看完还是不知道如何实践。
前后端项目结构区别
-
front-end
平时大家编写vue项目，一般都是使用
vue-cli初始化项目，生成的项目配置齐全，大家只要在src目录进行开发即可，开发完成后执行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 lang="en">
<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 lang="en">
<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很糟糕的原因。
