vue2项目 预渲染 Unable to prerender all routes 错误排查与解决方案

news2024/12/26 10:39:37

前言

今天在做我的Vue2项目的SEO优化时,我采用了prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。
但是,在打包时,报错Unable to prerender all routes。尝试了很多种网上方案,都没有成功,最后从源码排除终于找到了原因。
在这里插入图片描述

排除过程

报错提示很模糊,我打开node_modules查看他的源码,在源码中找到报错输出位置,我们加入一行代码的输出报错:
在这里插入图片描述
再打包一次,显示了真正的错误信息:
在这里插入图片描述
compilerFS.mkdirp方法不存在。

后面了解到,compilerFS这个插件已经好几年没有更新,而我们当前使用的是webpack5,出现了API变更的情况。
于此同时,根据错误提示,我们也在该库的issues中找到了历史讨论。
在这里插入图片描述
在讨论中,了解到,可以使用已经修改好了的库

cnpm i @dreysolano/prerender-spa-plugin

然后重新修改vue.config.js

// const PrerenderSPAPlugin = require('prerender-spa-plugin')  //原来引用的库,注释掉,不用了
 const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')

然后再次打包测试,打包成功!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2085549.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用代码和android studio创建flutter项目的区别差异

用代码创建的项目,在lib目录下,不会出现dictory文件夹,操作起来有些不便。

智慧灯塔,照亮企业AI Agent实施明路

AI Agent是能够感知环境,基于目标进行决策并执行动作的智能化应用。随着大模型能力增强以及RAG等技术的成熟,AI Agent的能力得到了质的飞跃。这些模型赋予了AI Agent更接近人类的思维能力,再联动各类工具和组件,使得AI Agent在处理…

虚拟机 Linux 安装 JDK(Vagrant 之二 CentOS7 篇)

本文已首发于:秋码记录 我们已然在上一篇讲解了如何快速的搭建一个Linux虚拟机,通过vagrant命令化工具,我们很方便的构筑了虚拟机,那么,我们所搭建出来的Linux系统主要是为了调试产品,以便产品在部署生产环…

电路笔记(PCB): kicad freerouting自动布线

安装插件 使用自动布线 会自动运行,等待布线完成即可。也可以布到一定程度,单击界面,切换到手动布线。 CG 一个替代的 freerouting 插件 https://forum.kicad.info/t/an-alternative-freerouting-plugin/52736/3

微信视频号的小视频怎么保存?视频号下载助手最实在的下载教程

最近一些朋友在私信问我视频号的视频怎么用下载助手保存到手机相册呢?虽说网络工具很多,但这个工具算是最稳定的工具之一。 软件介绍 工具名称:视频下载助手 工具扩展:视频号下载助手还拥有多种名称如:视频下载小助…

【开端】基于nginx部署的具有网关的web日志分析

一、绪论 基于nginx部署的具有网关的web日志分析,我们可以分析的日志有nginx的access.log ,网关的日志和应用的日志 二、日志分析 1、nginx日志 参数 说明 示例 $remote_addr 客户端地址 172.17.0.1 $remote_user 客户端用户名称 -- $time_lo…

在 CentOS 7 上安装 LNMP 环境:MySQL 8.0、PHP 8.3 和 ThinkPHP 8.0

在 CentOS 7 上安装 LNMP 环境,并配置 MySQL 8.0、PHP 8.3 以及 ThinkPHP 8.0,能够为你的 web 应用程序提供一个强大的开发和运行环境。下面是详细的安装步骤: --- ## 在 CentOS 7 上安装 LNMP 环境:MySQL 8.0、PHP 8.3 和 Thin…

鸿蒙( Beta5版)开发实战:基于AVCodecKit【音视频解码】

1:场景描述 场景:基于VideoCoder的音视频解码及二次处理播放。 首先导入选择器picker模块,使用PhotoViewPicker方法拉起图库选择视频文件,将视频文件传递到native侧使用Demuxer解封装器进行解封装,再使用OH_VideoDec…

83、 项目的发布和容器的重启策略

0、强制删除 [rootmaster01 ~]# kubectl run --imagenginx:1.22 nginx1 pod/nginx1 created [rootmaster01 ~]# kubectl get pod NAME READY STATUS RESTARTS AGE nginx1 0/1 ContainerCreating 0 1s [rootmaster01 ~]# kubectl delete…

Mysql基础练习题 577.员工奖金 (力扣)

577.编写解决方案,报告每个奖金 少于 1000 的员工的姓名和奖金数额。 建表插入数据: Create table If Not Exists Employee (empId int, name varchar(255), supervisor int, salary int) Create table If Not Exists Bonus (empId int, bonus int) Tr…

Android 查看代码行数(命令行和Statistic插件)

目录 一、命令行 1.1 使用 1.2 结果分析 二、Statistic 2.1 下载 Statistic 插件 2.2 设置 Statistic 插件 2.3 使用 Statistic 插件 相关推荐 一、命令行 find . -name "*.java" -o -name "*.kt" | xargs wc -l find .:从当前目录&am…

基于Material Design风格开源的Avalonia UI控件库

前言 今天大姚给大家分享一款基于Material Design风格开源、免费(MIT License)的Avalonia UI控件库:Material.Avalonia。 当前项目还处于alpha阶段。 Avalonia介绍 Avalonia是一个强大的框架,使开发人员能够使用.NET创建跨平台应…

Prometheus(七):自动发现服务consule

目录 1 consule配置使用1.1 Prometheus 支持的多种服务发现机制1.2 安装1、基于 docker 的 consul 集群 - docker-compose2、单节点cosule安装-docker安装 1.3 使用1、使用接口注册服务2、配置 Prometheus 对接Consul 实现自动服务发现3、使用接口注册服务2-JSON文件4、relabel…

【微信小程序】全局数据共享 - MobX

1. 什么是全局数据共享 2. 小程序中的全局数据共享方案 3.Mobx的使用 1.npm init -y(根据实际情况选择) 在小程序项目中,可以通过 npm 的方式引入 MobX 。 如果你还没有在小程序中使用过 npm ,那先在小程序目录中执行命令: npm init -y2. …

从“输血“到“造血“:“拨改投“政策如何推动产业升级?

在经济发展的浪潮中,“拨改投”政策如同一股清流,以创新之姿重塑了财政资金的传统使用模式。这一政策精髓在于,将财政资金从直接的拨款方式转变为灵活的股权投资方式,不仅激活了市场活力,更引领了产业升级的新风尚。 “…

Windows 10/11降级漏洞的工具包现已发布 仅供安全测试

早前有研究人员在分析 Windows 10/11 更新机制时发现微软虽然已经考虑到潜在的安全问题增加了各种限制,但还是存在失误因此存在弱点,研究人员则通过该弱点成功降级了系统。通过该漏洞不仅可以成功降级系统,同时系统还会认为自己已经完成更新并…

高级算法设计与分析 学习笔记1 递归与分治法 复杂度计算 大数乘法

本章的目录: 排序问题的示例与分析:递归与分治 插入排序: 类似于排序扑克牌。先把第一个元素当成已排序序列,然后把第二个纳入,用一次插入排序,然后将第三个纳入…… 插入排序性能分析 大O表示上界&#x…

云微客一分钟告诉你,为什么要做短视频矩阵?

都说2024年是经济下行的一年,但是要问2024年的营销关键词是什么的话,那一定是:短视频矩阵。短视频矩阵就是在多个短视频平台上建立多个账号,通过矩阵系统发布不同类型的短视频内容,实现品牌曝光、用户引流、粉丝积累等…

探索AI智能问答:改变未来交流的新动力

随着大数据和机器学习的发展,AI智能问答系统已经不仅仅是科幻小说中的幻想,而是正逐步融入我们的日常生活,从客户服务到教育,再到医疗诊断,其应用范围如此之广,让人叹为观止。 一、AI智能问答系统的原理与运…

关于武汉芯景科技有限公司的实时时钟芯片XJ8337开发指南(兼容DS1337)

一、芯片引脚介绍 1.芯片引脚 2.引脚描述 二、系统结构图 三、功能描述 1.时钟功能 2.闹钟功能(两个闹钟) 3.振荡器停止控制 4.频率输出(1HZ、1.096KHZ、8.192KHZ、32.768KHZ) 5.振荡器停止检测 6.闹钟中断标志 四、程序代…