vue 2.0服務(wù)端渲染從零開始(一)

前言

本文章重點(diǎn)在于代碼實(shí)踐，從零開始完整的展示如何構(gòu)建項(xiàng)目。
下午看了很多相關(guān)資料，但是講解的著重于理論，或者直接給出github倉庫鏈接，也有的只列出幾條重點(diǎn)，看完還是不知道如何實(shí)踐。

前后端項(xiàng)目結(jié)構(gòu)區(qū)別

  • front-end

    平時(shí)大家編寫vue項(xiàng)目，一般都是使用vue-cli初始化項(xiàng)目，生成的項(xiàng)目配置齊全，大家只要在src目錄進(jìn)行開發(fā)即可，開發(fā)完成后執(zhí)行npm run build完成生產(chǎn)環(huán)境的打包，丟到服務(wù)器上即可，簡直不要太省心。

    我估計(jì)以上的開發(fā)模式在當(dāng)前是占據(jù)相當(dāng)一部分比重的，vue-cli方便大家的同時(shí)，也造成很多開發(fā)者(一般是初入門者)對內(nèi)部原理缺乏認(rèn)知，對webpack配置不甚了解。在此建議大家對vue-cli生成的項(xiàng)目結(jié)構(gòu)進(jìn)行分析，網(wǎng)上也有很多分析文章，然后試著自己搭建腳手架，加深理解。

  • back-end

    提到服務(wù)器端渲染，涉及node服務(wù)，可能有一部分前端會(huì)覺得偏離了自己的方向，然而，作為一名程序員，真的建議大家不要把自己局限在一個(gè)方向。js現(xiàn)在異常活躍，pc端、移動(dòng)端、桌面端、后端、硬件端(嵌入式)都可以看到它的身影，前端也逐漸發(fā)展為大前端。

    在此以node項(xiàng)目為例子，做簡單說明。(node水平不高，若有錯(cuò)誤，歡迎指正)
    node項(xiàng)目的初始化和自己搭建一個(gè)前端腳手架并沒有太多區(qū)別，區(qū)分點(diǎn)主要有以下幾點(diǎn)：

  • node項(xiàng)目的入口文件是js，前端項(xiàng)目是html

  • node項(xiàng)目中可以引用node的相關(guān)依賴，而前端項(xiàng)目不可以

  • 原形畢露，后續(xù)補(bǔ)充...

搭建一個(gè)最簡單的服務(wù)器項(xiàng)目

在此使用express框架。

## 以desktop為根目錄
## 創(chuàng)建項(xiàng)目文件夾
mkdir simple-demo
## 進(jìn)入項(xiàng)目根目錄
cd simple-demo
## 項(xiàng)目初始化
npm init 
## 根據(jù)命令提示完成相關(guān)配置即可
## 安裝express依賴
npm install express -save
## 或者使用yarn安裝(兩種方式任選其一)
yarn add express
## 創(chuàng)建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);

結(jié)果

 ##  執(zhí)行以下命令
 node server.js

瀏覽器輸入localhost:8080

express.png

服務(wù)器端渲染基本用法

/**************************************************************************
以下所有源碼戳我。
**************************************************************************/

以上述simple-demo為基礎(chǔ)

## 安裝依賴(NPM、Yarn)
npm install vue vue-server-renderer --save

增加app.js文件

// 第 1 步：創(chuàng)建一個(gè) Vue 實(shí)例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})
// 第 2 步：創(chuàng)建一個(gè) renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：將 Vue 實(shí)例渲染為 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

在項(xiàng)目根目錄執(zhí)行node app.js

render-1.png

render原理
在node項(xiàng)目中，使用vue-server-renderer插件將vue實(shí)例渲染為HTML。

與服務(wù)器集成

將上述項(xiàng)目simple-demo中的server.js內(nèi)容清空，并更改為以下內(nèi)容。

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);

執(zhí)行命令node server.js

注: /index是我隨意輸入的url，從/開始之后都是req.url的值。

render-2.png

到此為止，已經(jīng)使用node服務(wù)器將vue實(shí)例渲染為HTML，并在瀏覽器中展示出來了。

使用頁面模板

上一個(gè)環(huán)節(jié)，我們在res.end中將vue渲染成的HTML標(biāo)記和HTML頁面包裹容器拼接在了一起。為了簡化這些操作，我們可以直接創(chuàng)建一個(gè)頁面模板。

index.template.html

注： ``注釋是必須的，否則在終端啟動(dòng)服務(wù)器的時(shí)候，會(huì)提示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模塊讀取并應(yīng)用模板文件。詳細(xì)源碼請參考dev_1分支的server-2.js文件

const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
});

執(zhí)行node server-2.js，得到以下結(jié)果(和上一步相同):

render-3.png

模板插值

上一個(gè)環(huán)節(jié)，模板是固定的，在這一步我們將通過模板插值，來配置模板。

增加模板文件mustache.template.html

<!DOCTYPE html>
<html>
  <head>
    <!-- 使用雙花括號(double-mustache)進(jìn)行 HTML 轉(zhuǎn)義插值(HTML-escaped interpolation) -->
    <title>{{ title }}</title>
    <!-- 使用三花括號(triple-mustache)進(jìn)行 HTML 不轉(zhuǎn)義插值(non-HTML-escaped interpolation) -->
    {{{ meta }}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

新建server-3.js，詳細(xì)源碼請參考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
})

執(zhí)行node server-3.js，得到以下結(jié)果，插值已生效:

renderer-3.png

服務(wù)端渲染和瀏覽器端渲染

仔細(xì)觀察網(wǎng)頁源碼，可以看到服務(wù)端渲染的頁面，body中是有html標(biāo)記的。

而通過vue-cli編寫的項(xiàng)目，在瀏覽器端渲染后，body中是空的，html標(biāo)記是通過js插入的。

搜索引擎爬蟲抓取工具是通過抓取頁面內(nèi)容來進(jìn)行信息收集的，而在瀏覽器端渲染的SPA項(xiàng)目，頁面內(nèi)容是空的，這就是為什么SPA項(xiàng)目SEO很糟糕的原因。

參考

Vue.js 服務(wù)器端渲染指南

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在實(shí)現(xiàn) egg + vue 服務(wù)端渲染工程化實(shí)現(xiàn)之前，我們先來看看前面兩篇關(guān)于Webpack構(gòu)建和Egg的文章： ...
    hubcarl閱讀 6,129評論 0贊 19
  • 轉(zhuǎn)載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護(hù)的Vue相關(guān)開源項(xiàng)目庫...
    果汁密碼閱讀 23,387評論 8贊 124
  • 全身發(fā)抖嘴里哈氣棉襖包裹你卻呼呼在笑
    玥萱兒閱讀 150評論 0贊 1
  • 在28號這一天，在我居住的縣城四川江安縣。過的無比激動(dòng)，感動(dòng)漣漪的一天。白天看酷炫刺激的摩托越野賽，晚上看...
    香秋美朵閱讀 643評論 1贊 2
  • 曲歌是我兄弟，我們曾有過生死之交。 那一年，在一輛長途大巴上我倆攜手勇斗一伙持刀歹徒，結(jié)果他的左臉被永久性的保留了...
    十月城池閱讀 681評論 3贊 0

友情鏈接更多精彩內(nèi)容