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('

hello world

') }) 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: `
Hello World
` }) // 第 2 步:创建一个 renderer const renderer = require('vue-server-renderer').createRenderer() // 第 3 步:将 Vue 实例渲染为 HTML renderer.renderToString(app, (err, html) => { if (err) throw err console.log(html) // =>
Hello World
})

在项目根目录执行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: '
访问的url是{{url}}
' }); 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(` Hello ${html} `); }); }) server.listen(8080);

执行命令node server.js

注: /index是我随意输入的url,从/开始之后都是req.url的值。

vue 2.0服务端渲染从零开始(一)_第1张图片
render-2.png

到此为止,已经使用node服务器将vue实例渲染为HTML,并在浏览器中展示出来了。

使用页面模板

上一个环节,我们在res.end中将vue渲染成的HTML标记和HTML页面包裹容器拼接在了一起。为了简化这些操作,我们可以直接创建一个页面模板。

index.template.html

注: ``注释是必须的,否则在终端启动服务器的时候,会提示Content placeholder not found in template



  Hello
  
    
  

新建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,得到以下结果(和上一步相同):

vue 2.0服务端渲染从零开始(一)_第2张图片
render-3.png

模板插值

上一个环节,模板是固定的,在这一步我们将通过模板插值,来配置模板。

增加模板文件mustache.template.html



  
    
    {{ title }}
    
    {{{ meta }}}
  
  
    
  

新建server-3.js,详细源码请参考dev_1分支的server-3.js文件

 const context = {
  title: 'hello',
  meta: `
    
  `
}
renderer.renderToString(app, context, (err, html) => {
  // page title will be "Hello"
  // with meta tags injected
})

执行node server-3.js,得到以下结果,插值已生效:

vue 2.0服务端渲染从零开始(一)_第3张图片
renderer-3.png

服务端渲染和浏览器端渲染

仔细观察网页源码,可以看到服务端渲染的页面,body中是有html标记的。

而通过vue-cli编写的项目,在浏览器端渲染后,body中是空的,html标记是通过js插入的。

搜索引擎爬虫抓取工具是通过抓取页面内容来进行信息收集的,而在浏览器端渲染的SPA项目,页面内容是空的,这就是为什么SPA项目SEO很糟糕的原因。

参考

Vue.js 服务器端渲染指南

你可能感兴趣的:(vue 2.0服务端渲染从零开始(一))