Vue中如何進(jìn)行網(wǎng)頁(yè)預(yù)渲染

這篇文章主要介紹了Vue中如何進(jìn)行網(wǎng)頁(yè)預(yù)渲染，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的阜平網(wǎng)站建設(shè)公司，阜平接單;提供網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行阜平網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

預(yù)渲染

通常情況下，Vue項(xiàng)目是單頁(yè)項(xiàng)目，也就是渲染出來(lái)的項(xiàng)目，只有一個(gè)index.html。

這樣的缺點(diǎn)很明顯：

• 部署到Nginx，需要做try_files $uri $uri/ /index.html內(nèi)部重定向，才可以用通過(guò)路由訪問(wèn)頁(yè)面。

• SEO不友好，搜索引擎收錄效果不佳。

而預(yù)渲染，就是把原來(lái)的單index.html，渲染成多個(gè)目錄，每個(gè)目錄又有一個(gè)index.html。這樣就不需要內(nèi)部重定向訪問(wèn)路由，也更利于搜索引擎收錄。

prerender-spa-plugin

本次預(yù)渲染使用prerender-spa-plugin進(jìn)行預(yù)渲染。

它的主要原理是啟動(dòng)瀏覽器，渲染完成后抓取HTML，然后再創(chuàng)建目錄，保存為index.html。

注意：

• 官網(wǎng)目前只有Vue2.x的Demo，實(shí)際上是支持Vue3的（本次演示也是使用Vue3）

• 雖然最近的一個(gè)發(fā)布版本是2018年（最近應(yīng)該會(huì)發(fā)布新版本），但是一直有維護(hù)，可以使用。

安裝

首先，我們用npm進(jìn)行安裝：

npm i prerender-spa-plugin

需要注意，因?yàn)?code>prerender-spa-plugin會(huì)安裝一個(gè)Chromium，所以安裝會(huì)比較久。

當(dāng)然，這種依賴(lài)，只有在打包時(shí)候才使用。所以，更好的安裝方式，應(yīng)該是：

npm i prerender-spa-plugin -D

項(xiàng)目引用

現(xiàn)在，我們就來(lái)項(xiàng)目引用，使用方法很簡(jiǎn)單，方便在兩個(gè)地方追加：

• App.vue

• vue.config.js

App.vue

首先，我們?cè)?code>App.vue內(nèi)追加觸發(fā)器事件：

mounted() {
  document.dispatchEvent(new Event('render-event'))
}

添加這個(gè)觸發(fā)器，是后續(xù)打包時(shí)候，會(huì)自動(dòng)觸發(fā)，并完成渲染。

vue.config.js

根據(jù)prerender-spa-plugin項(xiàng)目文檔：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

同時(shí)一些高級(jí)使用需要引入PuppeteerRenderer進(jìn)行自定義。所以，我自己的vue.config.js配置：

module.exports = {
    ……
    chainWebpack: config => {
        if (process.env.NODE_ENV == "development") {
        ……
        }
        if (process.env.NODE_ENV == "production") {
            config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
                {
                    staticDir: path.join(__dirname, 'dist'),
                    routes: [
                        '/', '/processIMG', '/statisticsChars', '/generatePWD', '/calculateTheDate',
                        '/randomNumber', '/textBase64', '/curl', '/mcstatus',
                        '/gh', '/about', '/mdv'
                    ],
                    renderer: new PuppeteerRenderer({
                        headless: false,
                        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
                        // 對(duì)應(yīng)App.vue 
                        renderAfterDocumentEvent: 'render-event',
                    }),
                }])
            ])
        }
    }

我使用的是鏈?zhǔn)胶瘮?shù)。這樣的好處，是方便我進(jìn)行if-else等函數(shù)式判斷。 其中，renderer屬性：

• headless：這個(gè)就是Chrome的headless屬性，常用于Debug。更多可以參考：Google Chrome

• executablePath：重定向?yàn)g覽器地址；我這里重定向使用我電腦自帶的Chrome瀏覽器了。（可選，可以直接不加，默認(rèn)調(diào)用Chromium）

• renderAfterDocumentEvent：需要同App.vue中 document.dispatchEvent(new Event('render-event'))的事件名稱(chēng)要對(duì)應(yīng)上。

而routes數(shù)組，里面就是需要預(yù)渲染的路由地址。

當(dāng)然，更多的可選參數(shù)，你也可以參考官方的文檔：

staticDir需要指向編譯后的輸出文件夾。

打包項(xiàng)目

之后，我們就可以打包項(xiàng)目了：

npm run build

打包后的效果：

看看預(yù)渲染的頁(yè)面：

因?yàn)槲矣惺褂肰ue-meta的組件，所以預(yù)渲染的文件也就有meta屬性了。

如果你也想用Vue-meta組件配合prerender-spa-plugin，可以參考文章：

https://juejin.cn/post/7056972997894094861

需要注意，如果出現(xiàn)什么錯(cuò)誤，可以嘗試：

# 刪除項(xiàng)目node_modules
rm -rf node_modules
# 重新安裝
npm install

這樣的文件，就可以進(jìn)行部署了。

部署效果

我們使用Nginx進(jìn)行部署，上次到Nginx Web文件夾內(nèi)，修改config文件，就不需要：

location / {
  try_files $uri $uri/ /index.html;
}

來(lái)實(shí)現(xiàn)內(nèi)部重定向了。因?yàn)橛姓鎸?shí)的目錄，可以去掉。

但是，數(shù)據(jù)代理，最好使用Nginx來(lái)實(shí)現(xiàn)。比如，開(kāi)發(fā)環(huán)境，數(shù)據(jù)代理：

config.devServer.proxy({
        '/dataApiJava': {
            target: JavaBaseURL,
            pathRewrite: {'^/dataApiJava': ""},
            ws: true,
            changeOrigin: true
        },
        '/dataApiPython': {
            target: PythonBaseURL,
            pathRewrite: {'^/dataApiPython': ""},
            ws: true,
            changeOrigin: true
        },
        '/ghs': {
            target: GithubSpeedURL,
            pathRewrite: {'^/ghs': ""},
            ws: true,
            changeOrigin: true
        }
    }
)

對(duì)應(yīng)的Nginx配置，可以這樣寫(xiě)：

location /dataApiPython/{
      proxy_pass http://127.0.0.1:8099/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
}
location /dataApiJava/ {
      proxy_ssl_server_name on;
      proxy_pass https://…….cn/;
}
location /ghs/ {
      proxy_ssl_server_name on;
      proxy_pass https://……/gh/;
}

給大家展示三種配置，按需設(shè)置哦。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中如何進(jìn)行網(wǎng)頁(yè)預(yù)渲染”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

名稱(chēng)欄目：Vue中如何進(jìn)行網(wǎng)頁(yè)預(yù)渲染
文章網(wǎng)址：http://muchs.cn/article48/jephep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、Google、小程序開(kāi)發(fā)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)