由於項目要做seo優化，而用vue寫成的spa頁面谷歌瀏覽器等是抓取不到數據的。介於ssr和預渲染來說，后者相對來說要簡單許多。所以采用了預渲染方式。采用插件prerender-spa-plugin使用
第一步：修改配置文件webpack.prod.conf.js
在
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代碼，可能是判斷不出來導致一直打包不了，刪了就好了。
最后發現可以打包，但打開頁面發現動態獲取數據的部分展示不出來，最后網上查看發現了一個問題，一個很關鍵的問題，就是
要把app.vue文件的最外面容器的id要設置成和index.html一樣
//index.html
<body>
<div id="app"></div>
</body>
// app.vue
<template>
<div id="app"></div>
</template>
改完后就ok了。
一定要加上延時渲染，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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！