vue項目使用 prerender-spa-plugin 預渲染

時間 2020-08-20

標籤 vue 項目使用 prerender spa plugin 渲染简体版

原文原文鏈接

因爲項目要作seo優化，而用vue寫成的spa頁面谷歌瀏覽器等是抓取不到數據的。介於ssr和預渲染來講，後者相對來講要簡單許多。因此採用了預渲染方式。採用插件prerender-spa-plugin使用html

第一步：修改配置文件webpack.prod.conf.js vue

在webpack

const webpackConfig = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({

new PrerenderSpaPlugin(
// Required - The path to the webpack-outputted app to prerender.
path.join(__dirname, '../dist'),
// Required - Routes to render.
[ '/','/wap/Runescape-3.Gold','/wap/Runescape-2007.Gold','/wap/RS-07-Accounts.account','/wap/Runescape-2007.FireCape','/wap/customer/message.html' ],
{
//在必定時間後再捕獲頁面信息，使得頁面數據信息加載完成
captureAfterTime: 10000,
//忽略打包錯誤
maxAttempts: 10,
}
)
打包發現一直報超時錯誤，後面發現我在index.html文件寫了一段判斷設備是移動端仍是pc端的js代碼，多是判斷不出來致使一直打包不了，刪了就行了。web

最後發現能夠打包，但打開頁面發現動態獲取數據的部分展現不出來，最後網上查看發現了一個問題，一個很關鍵的問題，就是瀏覽器

要把app.vue文件的最外面容器的id要設置成和index.html同樣app

//index.html
<body>
<div id="app"></div>
</body>

// app.vue
<template>
<div id="app"></div>
</template>
改完後就ok了。dom

必定要加上延時渲染，captureAfterTime: 10000, 否則預渲染出來的頁面是沒有數據的。由於接口獲取數據須要時間佈局

打包上線後報錯 webpackJsonp is not defined。這是由於公共文件必須在本身引用的js文件以前引用。字體

能夠手動改文件引用，可是推薦如下解決辦法：優化

找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件，添加以下配置便可

chunks: ['manifest', 'vendor', 'app']
改了後發現依然報錯，而查看渲染的頁面發現位置沒錯

那爲何報錯呢

通過仔細查看，發現那兩個報錯的js文件刪了也沒問題，後來查看沒有預渲染的頁面是沒有這兩個js文件的，也就是說這2個js文件是由上圖3個js文件生成的，這2個js文件是用來動態生成dom頁面的。然而咱們預渲染把這2個文件生成出來了，並且是放在head標籤裏的，這時還沒執行到上圖3個js文件，因此確定報錯。目前比較笨的方法就是手動刪除這2個js。

最後一個問題：每次打開頁面和刷新頁面，整個頁面佈局變得特別混亂。過了大概1s左右頁面就正常了，起初覺得是否是樣式沒有加載。後面調試發現樣式正常加載的啊？那是什麼鬼問題，按理說link加載樣式在head標籤，確定是加載完再加載body啊。

看了半天沒有看出個因此然來，後面偶然撇了一眼渲染後的頁面

我去！！！，這個font-size:46.222px是什麼鬼？這麼大的字體能不形成頁面混亂嗎。這才恍然大悟，由於是移動端，加了段動態斷定設備的瀏覽器可視區寬度來設定根字體大小的js。而後在預渲染時，根本沒有瀏覽器窗口這個數據，估計是以電腦屏幕大小斷定了。結果給了個驚人的字體大小。因此每次打開頁面的第一時間是預渲染的頁面。通過再次斷定後調回正常，因此出現了短暫的佈局混亂。目前沒想到什麼好的方法去改，只能手動修改字體大小。--------------------- 做者：二葉扁舟來源：CSDN 原文：https://blog.csdn.net/u010276653/article/details/79933233 版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。