vue项目使用 prerender-spa-plugin 预渲染

最新推荐文章于 2024-08-23 13:15:21 发布

二叶扁舟

最新推荐文章于 2024-08-23 13:15:21 发布

阅读量4.3k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/u010276653/article/details/79933233

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于项目要做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。然后在预渲染时，根本没有浏览器窗口这个数据，估计是以电脑屏幕大小判定了。结果给了个惊人的字体大小。所以每次打开页面的第一时间是预渲染的页面。经过再次判定后调回正常，所以出现了短暂的布局混乱。目前没想到什么好的方法去改，只能手动修改字体大小。