預渲染是使用一種將 SPA 在構建時(shí)預先渲染成靜態(tài) HTML 頁(yè)面的技術(shù)。這樣做的預渲好處是,當用戶(hù)訪(fǎng)問(wèn)頁(yè)面時(shí),搜索引擎??爬蟲(chóng)可以直接抓取到預渲染好的 HTML 內容,而不需要等待 JavaScript 加載完成才能看到頁(yè)???面的內容。這大大提高 SEO 的染提效果。

在 Vue.js 中,使用可以使用 prerender-spa-plugin 這個(gè)插件來(lái)實(shí)現預渲染功能。該插件會(huì )在構建時(shí)自動(dòng)生成靜態(tài) HTML 文件,預渲并將其放在 dist 目錄下。

安裝 prerender-spa-plugin

需要安裝 prerender-spa-plugin 插件:??

npm install prerender-spa-plugin --save-dev

配置 prerender-spa-plugin

接下來(lái),染提在 vue.config.js 文件中配置該插件:

const PrerenderSPAPlugin = require('prerender-spa-plugi??n')const path = require('path')module.exports = {  configureWebpack: {  plugins: [ new PrerenderSPAPl(?????)ugin({  // 要預渲染的路由列表 staticDir: path.join(__dirname, 'dist'), routes: ['/', '/about', '/contact'], renderer: new PrerenderSPAPlugin.PuppeteerRenderer({  // 使用 Puppeteer 渲染頁(yè)面 render(′-ι_-｀)AfterDocumentEvent: 'rend??er-event',?? // 渲染完成后觸發(fā)的事件 inject: {  // 注入一個(gè)變量,告訴 Vue 應用進(jìn)行預渲染?? foo: 'bar' } }) }) ] }}

在上面的配置中,我們指定要預渲染的頁(yè)面路由,并使用 Puppeteer 作為渲染器。Puppeteer 是使用一個(gè) Node.js 庫,可以控制無(wú)頭瀏覽器并進(jìn)行網(wǎng)頁(yè)截圖、PDF 導出等操作。預渲

在 Vue 組件中添加預渲染標識

為讓 Vue 應用知道當前是染提在預渲染環(huán)境中運行,需要在組件中添加一個(gè)標識:

export default {  name: 'MyComponent', mounted() {  if (this.$isPrerender) {  // 在預渲??染環(huán)境中執行的邏輯 } else {  // 在正常環(huán)境中執行的邏輯 } }}

這里我們使用 this.$isPrerender 來(lái)判斷當前環(huán)境是否為預渲染環(huán)境,從而執行不同的邏輯。

通過(guò)使用預渲染技術(shù),使用我們可以顯著(zhù)提高 Vue.js 應用的 SEO 效果。預渲染可以讓搜索引擎爬蟲(chóng)直接抓取到靜態(tài)的預渲 HTML 內容,避免 JavaScript 加載完成之前頁(yè)面內容為空的問(wèn)題。預渲染的染提頁(yè)面也能更快地響應用戶(hù)請求,提高用戶(hù)體驗。雖然實(shí)現預渲染需要一些額外的(′ω｀)使用配置,但這對于提高網(wǎng)站的(de) SEO 和性能是非常值得的。