溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue服務(wù)端渲染操作簡(jiǎn)單入門實(shí)例分析

發(fā)布時(shí)間：2020-09-23 14:23:16 來源：腳本之家 閱讀：145 作者：zhensg 欄目：web開發(fā)

本文實(shí)例講述了vue服務(wù)端渲染操作。分享給大家供大家參考，具體如下：

想到要學(xué)習(xí)vue-ssr的同學(xué)，自不必多說，一定是熟悉了vue，并且多多少少做過幾個(gè)項(xiàng)目。然后學(xué)習(xí)vue服務(wù)端渲染無非解決首屏渲染的白屏問題以及SEO友好。

話不多說，筆者也是研究多日才搞明白這個(gè)服務(wù)端渲染到底是雜么回事！?。?/p>

一，首先實(shí)現(xiàn)下官網(wǎng)的基本案例

隨便建一個(gè)目錄，然后執(zhí)行npm init初始化項(xiàng)目，生成工程文件package.json；創(chuàng)建server.js；然后按照vue-ssr官方鏈接：https://ssr.vuejs.org/zh/basic.html教程里面介紹的server.js，復(fù)制教程里面代碼，如下

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.end(`
   <!DOCTYPE html>
   <html lang="en">
    <head><title>Hello</title></head>
    <body>${html}</body>
   </html>
  `)
 })
})
server.listen(8080)

顯然需要按照上面引入的依賴vue，express和vue-server-renderer，安裝完畢，在終端執(zhí)行，node server.js，打開瀏覽器，http://localhost:8080/，不出意外會(huì)是亂碼，因?yàn)楣倬W(wǎng)的返回的html字符串里面沒有 <meta charset="utf-8">，而加上這個(gè) 就好了。

當(dāng)然還可以引入一個(gè)模板文件，同樣是官網(wǎng)的案例，此時(shí)的server.js為

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.end(html)
 })
})
server.listen(8080)

模板文件index.template.html

<!DOCTYPE html>
<html lang="en">
 <head><title>Hello</title></head>
 <body>
   <!-- 下面這個(gè)注釋必須有 -->
  <!--vue-ssr-outlet-->
 </body>
</html>

上面注釋根據(jù)官網(wǎng)教程，是vue注入的位置標(biāo)記。然后同樣執(zhí)行，node server.js就可以了。

是不是很簡(jiǎn)單，還可以創(chuàng)建一個(gè)對(duì)象來改變模板的標(biāo)題和meta，這個(gè)時(shí)候的server.js和模板文件代碼分別是

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 context = {
  title: 'hello',
  meta: `
  <meta ...>
  <meta ...>
 `,url:req.url
 }
 const app = new Vue({
  data: {
   url: req.url
  },
  template: `<div>訪問的 URL 是： {{ url }}</div>`
 })
 renderer.renderToString(app, context,(err, html) => {
  if (err) {
   res.status(500).end('Internal Server Error')
   return
  }
  res.end(html)
 })
})
server.listen(8080)


<!DOCTYPE html>
<html lang="en">
 <head>
   <title>{{title}}</title>
   {{{meta}}}
 </head>
 <body>
   <!-- 下面這個(gè)注釋必須有 -->
  <!--vue-ssr-outlet-->
 </body>
</html>

這里說下我的理解，vue服務(wù)端渲染實(shí)際是一套代碼的兩次應(yīng)用，所謂的一套代碼就是拿出server.js外面去的vm實(shí)例，上面之所以簡(jiǎn)單是因?yàn)槲覀冊(cè)趕erver內(nèi)部創(chuàng)建的vm實(shí)例，一旦將vm拿出去，在server.js外部引入，那么涉及的就麻煩了。

這里分兩條線說，一個(gè)是在server.js外面創(chuàng)建一個(gè)app.js；結(jié)果是無法引入到server中；而這個(gè)也不是關(guān)注的重點(diǎn)；

另一條線是使用vue-loader創(chuàng)建一個(gè)vm實(shí)例，然后引入到server中，整個(gè)vue渲染就在解決這個(gè)問題，解決引入的問題，解決引入之后與前端混合的問題。下面貼上簡(jiǎn)單案例的實(shí)現(xiàn)代碼。

因?yàn)椴荒苤苯討?yīng)用.vue文件以及外部的js文件，所以需要借助webpack，借助webpack將vue實(shí)例，轉(zhuǎn)譯為node可用代碼，以及對(duì)前端代碼進(jìn)行轉(zhuǎn)譯。

二，以vue init webpack-simple vuessr0 為基礎(chǔ)的vue-ssr案例

1）用vue-cli也就是vue腳手架建了一個(gè)簡(jiǎn)單模板，命令：vue init webpack-simple vuessr0，相信對(duì)此都比較熟悉，建好后的結(jié)構(gòu)如下

vue服務(wù)端渲染操作簡(jiǎn)單入門實(shí)例分析

之后改造一下，創(chuàng)建幾個(gè)文件app.js,entry-client.js,entry-server.js,創(chuàng)建build目錄，刪除自動(dòng)生成的webpack.config.js文件，改之后的目錄結(jié)構(gòu)為

各個(gè)文件的作用，entry-server.js將vm實(shí)例，轉(zhuǎn)譯為node可用代碼；

entry-client.js和傳統(tǒng)前端處理一致。

vue服務(wù)端渲染操作簡(jiǎn)單入門實(shí)例分析

好吧，github鏈接地址為：https://github.com/mstzhen/vue-ssr；我實(shí)在有點(diǎn)懶了。

需要說明的是，webpack將一份文件打包為兩份，前端入口文件的作用是掛載到id上面，后端入口文件以及后端文件負(fù)責(zé)注入。

首先安裝依賴：npm install；

然后依次

npm run build:client

npm run build:server

npm run dev

8080端口訪問即可。

最后，本文只是對(duì)vue服務(wù)端官網(wǎng)最簡(jiǎn)單那個(gè)實(shí)例的實(shí)現(xiàn)。沒有使用vue-router，沒有vuex，更沒有服務(wù)端數(shù)據(jù)請(qǐng)求。希望對(duì)正在學(xué)習(xí)vue服務(wù)端學(xué)習(xí)的小伙伴有所幫助。

錯(cuò)誤之處，請(qǐng)指出。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手