由于项目要做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
版权声明：本文为博主原创文章，转载请附上博文链接！

vue项目使用 prerender-spa-plugin 预渲染的更多相关文章

  1. 什么是服务端渲染、客户端渲染、SPA、预渲染，看完这一篇就够了

    服务端渲染(SSR) 简述:     又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML.     鼠标右击点击查看源码时,页 ...

  2. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

  3. vue项目echarts画布删除历史数据重新渲染数据

    vue用到echarts时,根据select多选下拉框进行echarts折线图渲染.发现折现只能增加不能减少,后来根据echarts API文档发现 调用方式: chart.setOption(opt ...

  4. vue项目中编写一个图片预览的公用组件

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...

  5. Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...

  6. Prerender.io - 预渲染架构，提高AngularJS SEO

    近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多 ...

  7. prerender-spa-plugin预渲染踩坑

    为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...

  8. Vue项目预渲染机制

    我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...

  9. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

随机推荐

  1. 基于Jmeter+maven+Jenkins构建性能自动化测试平台

      一.目的: 为能够将相关系统性能测试做为常规化测试任务执行,且可自动无人值守定时执行并输出性能测试结果报告及统计数据,因此基于Jmeter+maven+Jenkins构建了一套性能自动化测试平台 ...

  2. 你不知道的JavaScript--Item28 垃圾回收机制与内存管理

    1.垃圾回收机制-GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  3. Visual Studio Code Tips

    新项目要用到Visual Studio Code, 在使用的过程中有些tips, 记录下来以便查阅. 1. 自动保存代码 文件 => 自动保存 2. 帮助输入代码模式 扩展 => 安装HT ...

  4. BZOJ_4867_[Ynoi2017]舌尖上的由乃_分块+dfs序

    BZOJ_4867_[Ynoi2017]舌尖上的由乃_分块+dfs序 Description 由乃为了吃到最传统最纯净的美食,决定亲自开垦一片菜园.现有一片空地,由乃已经规划n个地点准备种上蔬菜.最新 ...

  5. BZOJ_4443_[Scoi2015]小凸玩矩阵_二分+二分图匹配

    BZOJ_4443_[Scoi2015]小凸玩矩阵_二分+二分图匹配 Description 小凸和小方是好朋友,小方给小凸一个N*M(N<=M)的矩阵A,要求小秃从其中选出N个数,其中任意两个 ...

  6. Docker系列之swarm集群搭建

    学习Docker很久了,今天分享一下Docker的swarm集群的搭建过程很简单 首先第一步是 每台机器上面都要安装docker 本人使用的是centos7操作系统,使用3太虚拟机,3太虚拟机必须网络 ...

  7. layui导航栏和layui.layui.msg问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. hystrix服务降级（3）

    Hystrix使用fallback机制很简单,继承HystrixCommand只需重写getFallback(),继承HystrixObservableCommand只需重写resumeWithFal ...

  9. set命令详解

    我们依然是围绕这几个话题展开学习: 1.什么是set命令? 2.为什么要用set命令? 3.怎样使用set命令? 1.什么是set命令? ♦ set命令作用主要是显示系统中已经存在的shell变量,以 ...

  10. node.js与ThreadLocal

    ThreadLocal变量的说法来自于Java,这是在多线程模型下出现并发问题的一种解决方案. ThreadLocal变量作为线程内的局部变量,在多线程下可以保持独立,它存在于 线程的生命周期内,可以 ...