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中增加：

js 复制代码

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

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

1.render:routeContext:

这个后台运行提示即将废弃，建议改用'vue-renderer:ssr:context'，对应代码：

js 复制代码

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

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

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

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响应内容，所以对应的代码如下：

js 复制代码

  // modules/clear-nuxt-data.js
  this.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），但时间上就很明显，几乎是翻倍了。