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

時間  2019-11-08
標籤 vue 2.0 服務 渲染 開始 简体版
原文   原文鏈接
轉載：https://www.jianshu.com/p/e810cb90fc33
SSR官方文檔：https://ssr.vuejs.org/zh/

什麼是服務器端渲染 (SSR)

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上徹底可交互的應用程序。html

服務器渲染的 Vue.js 應用程序也能夠被認爲是"同構"或"通用"，由於應用程序的大部分代碼均可以在服務器和客戶端上運行。前端

先後端項目結構區別

  • front-endvue

    平時你們編寫vue項目，通常都是使用vue-cli初始化項目，生成的項目配置齊全，你們只要在src目錄進行開發便可，開發完成後執行npm run build完成生產環境的打包，丟到服務器上便可，簡直不要太省心。node

    我估計以上的開發模式在當前是佔據至關一部分比重的，vue-cli方便你們的同時，也形成不少開發者(通常是初入門者)對內部原理缺少認知，對webpack配置不甚瞭解。在此建議你們對vue-cli生成的項目結構進行分析，網上也有不少分析文章，而後試着本身搭建腳手架，加深理解。webpack

  • back-endgit

    提到服務器端渲染，涉及node服務，可能有一部分前端會以爲偏離了本身的方向，然而，做爲一名程序員，真的建議你們不要把本身侷限在一個方向。js如今異常活躍，pc端、移動端、桌面端、後端、硬件端(嵌入式)均可以看到它的身影，前端也逐漸發展爲大前端。程序員

    在此以node項目爲例子，作簡單說明。(node水平不高，如有錯誤，歡迎指正)
    node項目的初始化和本身搭建一個前端腳手架並無太多區別，區分點主要有如下幾點：github

  • node項目的入口文件是js，前端項目是htmlweb

  • node項目中能夠引用node的相關依賴，而前端項目不能夠vue-cli

搭建一個最簡單的服務器項目

在此使用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

GitHub 項目源碼-demo：https://github.com/heuuLZP/simple-ssr/tree/dev_1

以上述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原理
在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的值。

到此爲止，已經使用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模塊讀取並應用模板文件。

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

如下爲詳細源碼：

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

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(html)
  });
})

server.listen(8080, () =>{
	console.log('服務器啓動成功');
});
複製代碼

執行node server-2.js，獲得如下結果(和上一步相同):

模板插值

上一個環節，模板是固定的，在這一步咱們將經過模板插值，來配置模板。

增長模板文件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

const context = {
  title: 'hello',
  meta: `
    <meta charset='utf-8'>
  `
}
renderer.renderToString(app, context, (err, html) => {
  // page title will be "Hello"
  // with meta tags injected
})複製代碼

如下爲詳細源碼：

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

server.get('*', (req, res) => {
	
  const app = new Vue({
    data: {
      url: req.url
    },
    template: '<div>您訪問的url是{{url}}</div>'
  });
  
  const context = {
	  title: '你好，VUE SSR！',
	  meta: `
		<meta name="description" content="Vue.js 服務端渲染指南">
		<meta ...>
	  `
	}

  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
	res.setHeader('Content-Type','text/html;charset=UTF-8'); // 避免亂碼
        res.end(html)
  });
})

server.listen(8080, () =>{
	console.log('服務器啓動成功');
});
複製代碼

執行node server-3.js，獲得如下結果，插值已生效:

服務端渲染和瀏覽器端渲染

仔細觀察網頁源碼，能夠看到服務端渲染的頁面，body中是有html標記的。

而經過vue-cli編寫的項目，在瀏覽器端渲染後，body中是空的，html標記是經過js插入的。

搜索引擎爬蟲抓取工具是經過抓取頁面內容來進行信息收集的，而在瀏覽器端渲染的SPA項目，頁面內容是空的，這就是爲何SPA項目SEO很糟糕的緣由。

參考

Vue.js 服務器端渲染指南

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程