一、问题描述
在以前的一篇文章《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),但时间上就很明显,几乎是翻倍了。