Nuxt去除data-n-head等默认属性

当我们使用nuxt开发网站时，生成的页面头部会自动加上 data-h-head的属性，例如

本来这也不算什么事，毕竟框架开发给标签加属性，很常见的事了

但是好巧不巧，做seo的团队发出了他们的意见，头部标签就是不能有 data-h-head属性

没得办法，作为一个高级程序员，我开始了百度，然后就搜出了以下答案

render:{
   route(url, result){
     result.html = result.html.replace(/data-n-head=\"ssr\"/gi, '')
   }
}

（我又回来了！上面这个命令在使用npm run build 和 npm run start 部署时是没有问题的)

立马复制一看，没错解决了，本地的网页头部标签确实没有了 data-h-head

立马提交，generate打包生产，刷新一看，呐尼，这哥们还是好好的在这

 

左思右想，试了两次，跟代码没啥关系，生产就是没有作用

然后就去官方文档翻箱倒柜，就发现了这玩意

嗖地撕裂，当时大悟，立马把我 写在 render 里的代码，复制了过来，一顿操作，终于去除了data-h-head

 hooks: {
    generate:{
      page(page){
        page.html = page.html.replace(/data-n-head=\"ssr\"/gi, '')
      }
    }
  }, // head 同级哦
  loading: {
    color: '#1393FF',
  },
  head: {
  
  }

后来发现官方也有说解决方案

官方回答：Nuxt adds in data-n-head into this but for the most part it’s pretty standard meta tags.

hooks: {
    generate: {
      page(page) {
        const cheerio = require("cheerio");
        const $ = cheerio.load(page.html, { decodeEntities: false });
 
        const attrs = [
          "data-n-head-ssr",
          "data-n-head",
          "data-hid",
          "data-vue-ssr-id",
          "data-server-rendered"
        ];
 
        attrs.forEach(value => {
          $("*[" + value + "]").removeAttr(value);
        });
        
        page.html = $.html();
      }
    }
  }

官网的确实全面一些，不过我图省事还是用上面的正则干了

今天的避坑日记就写到这里了，多谢观看，关注公众号 HolleBug 前端学习不会迷路