Nuxt2:强制删除window.__NUXT__中的数据

一、问题描述

在以前的一篇文章《Nuxt3: 强制删除__NUXT_DATA__的一种方式》中曾介绍了在Nuxt3中如何删除存在于页面id为__NUXT_DATA__的script节点中的数据。
此次,Nuxt2与Nuxt3不同在于它的数据是存在于window.__NUXT__,那么该如何处理呢?

二、解决方案

解决方式也是跟Nuxt3一样,通过hook对生成的HTML内容进行修改。

首先看一下官方的相关文档《The renderer class》:

在这里插入图片描述

为了使用hook,我们需要先做两个事情:

(1)创建modules/clear-nuxt-data.js
modules目录如果没有,则自行在项目根目录创建,而js文件名称可以自定义,js文件的代码接下来会提到。

(2)在nuxt.config.js中增加:

// nuxt.config.js
module.exports = {...modules: [...'~/modules/clear-nuxt-data'],...
}

接下来我们回过头看上面的截图,里面提到了两个hook可能是我们所需要的:

1.render:routeContext:
这个后台运行提示即将废弃,建议改用’vue-renderer:ssr:context’,对应代码:

 // modules/clear-nuxt-data.jsthis.nuxt.hook('vue-renderer:ssr:context', ( context) => {  context.nuxt = {routePath: JSON.stringify(context.nuxt.routePath),serverRenderer: true}}); 

实际测试,页面上貌似“达到了效果”,但经过确认,页面上没有SSR渲染的效果,虽然页面也显示了正常的数据,但都是经过客户端重新请求接口后生成的。因此如果为了SEO,此方式不能用。

hook的另一种使用方式是在nuxt.config.js中配置:

// nuxt.config.js
module.exports = {...hooks: {'vue-renderer:ssr:context'(context) {const routePath = JSON.stringify(context.nuxt.routePath);context.nuxt = {serverRendered: true, routePath};}},...}

意外的是,这种配置方式并不会像上面模块使用hook那样会导致没有SSR渲染的效果,也就是这种方式是能达到效果的。

2.render:route

注意到这个hook的处理函数里有一个result的参数,经过调试发现result.html就是最终给客户端的HTML响应内容,所以对应的代码如下:

  // modules/clear-nuxt-data.jsthis.nuxt.hook('render:route', ( url, result, context) => {  result.html = result.html.replace(/(<script>window.__NUXT__=)+([\s\S]+?)(<\/script>)/,'$1'+JSON.stringify({routePath: JSON.stringify(context.nuxt.routePath),serverRenderer: true})+'$3')}); 

最终效果:

在这里插入图片描述

顺便看一下修改前后两次请求html之间的差别:

在这里插入图片描述

可以看到似乎两次html加载的大小都是1.2M(差别应该只是几百Kb),但时间上就很明显,几乎是翻倍了。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025深圳国际户外庭院营地用品博览会

2025深圳国际户外庭院营地用品博览会 2025 Shenzhen International Outdoor Courtyard Camping Supplies Expo 时间&#xff1a;2025年02月27-3月01日 地点&#xff1a;深圳会展中心&#xff08;福田馆&#xff09; 详询主办方陆先生 I38&#xff08;前三位&#xff09; …

如何用OceanBase与DataWorks,打造一站式的数据集成、开发和数据服务

导语&#xff1a;在OceanBase 2024年开发者大会的技术生态论坛上&#xff0c;阿里云DataWorks团队的高级技术专家罗海伟&#xff0c;详细阐述了一站式大数据开发治理平台DataWorks的能力&#xff0c;并对于如何基于OceanBase和Dataworks构建一站式数据集成、开发以及数据服务进…

Linux驱动开发—Linux内核定时器概念和使用详解,实现基于定时器的字符驱动

文章目录 内核定时器概念在Linux驱动模块中使用定时器软定时器&#xff08;Soft Timers&#xff09;jiffies 含义高精度定时器&#xff08;High Resolution Timers&#xff09; 实现倒计时字符设备驱动 内核定时器概念 在 Linux 内核中&#xff0c;定时器是用来管理和调度延迟…

8.7-主从数据库的配置+mysql的增删改查

一、mysql环境的配置 1.环境准备 &#xff08;1&#xff09;主数据库 #关闭防火墙 [rootmaster ~]# systemctl stop firewalld#关闭selinux [rootmaster ~]# setenforce 0#下载lrzsz工具 [rootmaster ~]# yum -y install lrzsz#安装rsync [rootmaster ~]# yum -y install rs…

低代码平台:效率利器还是质量妥协?

目录 低代码平台&#xff1a;效率利器还是质量妥协&#xff1f; 一、引言 二、低代码平台的定义和背景 1、什么是低代码平台&#xff1f; 2、低代码平台的兴起 三、低代码开发的机遇 1、提高开发效率 2、降低开发成本 3、赋能业务人员 四、低代码开发的挑战 1、质量…

pgbackrest备份方案(差异和增量备份的区别)

pgbackrest备份方案(差异和增量备份的区别) 一 备份 全量备份&#xff1a; 将数据库集群的全部内容复制到备份中。数据库集群的第一个备份始终是全量备份。始终能够直接还原全量备份。全量备份不依赖于完整备份之外的任何文件来保持一致性。 差异备份&#xff1a; 仅复制自…

3D展示的前景如何?

随着人类科技的不断进步&#xff0c;对未来的趋势也肯定是向高纬度发展。3D取代2D只是一个所需时间长短而已&#xff0c;题主既然这么问&#xff0c;说明肯定是意识到了3D是未来的趋势&#xff0c;那么就应该多接触和了解未来的3D平台及应用工具、应用领域等。 之前2G\3G时代&…

1.MongoDB入门指南之开篇

1. 写在前面 MongoDB大家可能听说过&#xff0c;但是要怎么学习&#xff1f;先学习哪个&#xff0c;很多人是不知道的&#xff0c;毕竟面对一个未知的事物&#xff0c;迷茫是很多人都会遇到的&#xff0c;从今天起我们就开始系统的介绍MongoDB的学习。 2. 课程介绍 课程主要分…

【Android Studio】原生应用部署第三方插件(探针)

一、本地引入包流程 &#xff08;一&#xff09;本地引入包内容 &#xff08;二&#xff09;本地引入包操作步骤 将 【probe-android-sdk】目录里面所有的aar包复制到嵌码项目工程&#xff08;App级别&#xff09;的 libs 目录下 二、添加插件 &#xff08;一&#xff09;…

Qt文件读写

Qt中文件读写类简述 包含头文件#include <QFile> 读写模式如下 枚举 文件读写步骤 1 先使用string 类型来接受打开文件的返回值 QFileDialog::getOpenFileName(this,"文件","./"); //打开一个文件 2 构建文件对象 Qfile ff (qstring)接受打…

“前缀和”专题篇一

目录 【模版】前缀和 【模版】二维前缀和 寻找数组的中心下标 除自身以外数组的乘积 【模版】前缀和 题目 思路 这道题如果使用暴力解法&#xff0c;即针对每次查询&#xff0c;先算出前r个数的总和&#xff0c;然后再算出前l-1个数的总和&#xff0c;然后相减就得出本次查…

【MYSQL】MYSQL逻辑架构

mysql逻辑架构分为3层 mysql逻辑架构分为3层 1). 连接层&#xff1a;主要完成一些类似连接处理&#xff0c;授权认证及相关的安全方案。 2). 服务层&#xff1a;在 MySQL据库系统处理底层数据之前的所有工作都是在这一层完成的&#xff0c;包括权限判断&#xff0c;SQL接口&…

三数之和-Leetcode

leetcode链接&#xff1a;三数之和 题目描述 解题思路 主要要思考以下几个问题&#xff1a; 如何选取三个元素&#xff1f;— 当前节点 左指针 右指针指针开始位置&#xff1f;— 左指针 当前节点位置 i 1&#xff0c; 右指针 n - 1如何保证不重复&#xff1f; — 先把…

利用自然语言处理(NLP)技术挖掘旅游评论数据

目录 简单了解 延伸 如何使用自然语言处理技术提高旅游评论情感倾向的准确性&#xff1f; 旅游评论数据中多模态信息融合的最佳实践是什么&#xff1f; 在旅游评论数据预处理和清洗过程中&#xff0c;哪些方法最有效&#xff1f; 使用Python网络爬虫技术进行旅游评论数据的…

Python酷库之旅-第三方库Pandas(072)

目录 一、用法精讲 291、pandas.Series.dt.round函数 291-1、语法 291-2、参数 291-3、功能 291-4、返回值 291-5、说明 291-6、用法 291-6-1、数据准备 291-6-2、代码示例 291-6-3、结果输出 292、pandas.Series.dt.floor函数 292-1、语法 292-2、参数 292-3、…

关于手机中的红外遥控

在手机电路中&#xff0c;有这么不起眼的一部分&#xff0c;虽看似简单&#xff0c;但是却给我们的生活在一定程度上带来了极大的便捷-红外遥控部分。 其置于手机顶部&#xff0c;并在壳体处挖开一个小孔&#xff0c;用于红外信号对外界的传递。如果你感兴趣的话&#xff0c;不…

Go语言项目实战班04 Go语言课程管理系统项目实战 20240807 课程笔记和上课代码

预览 课程特色 本教程录制于2024年8月8日&#xff0c;使用Go1.22版本&#xff0c;基于Goland2024进行开发&#xff0c;采用的技术栈比较新。 每节课控制在十分钟以内&#xff0c;课时精简&#xff0c;每节课都是一个独立的知识点&#xff0c;如果有遗忘&#xff0c;完全可以当…

基于JSP技术的人事管理系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 Java语言 工具&#xff1a; Myeclipse 系统展示 首页 管理员功能模块 员工功能模…

攻击者劫持 Facebook 页面用于推广恶意 AI 照片编辑器

近日&#xff0c;有攻击者劫持了 Facebook 上的网页&#xff0c;诱骗用户下载一个合法的人工智能&#xff08;AI&#xff09;照片编辑器&#xff0c;但实际上他们真正下载的却是一个专门用以盗取用户的凭据信息窃取程序。 趋势科技的研究人员发现的这一恶意广告活动利用了人工…

什么是实时数据仓库?它有哪些不可替代之处?

【实时数据仓库】可以分开来理解&#xff1a; ✅【实时数据】&#xff1a;即能够快速处理数据&#xff0c;且几乎无延迟的提供最新的数据的能力。 ✅【仓库管理】&#xff1a;可以理解为对仓库的库存控制、对仓库的存储优化以及协调物流。 那么实时数据仓库就是&#xff1a;…