如何在Nuxt中为自动压缩生成的JS script标签添加自定义属性？

针对Nuxt构建后自动注入到页面<head>的打包产物脚本，由于Nuxt本身没有开放针对自动生成chunk脚本的标签属性配置入口，可通过渲染阶段的钩子做精准匹配替换实现需求，不同版本Nuxt的实现方式如下：

Nuxt3 实现 #

在项目根目录的nuxt.config.ts/nuxt.config.js中配置Nitro钩子，在服务端返回HTML响应前完成标签属性的插入，示例配置：

export default defineNuxtConfig({
  nitro: {
    hooks: {
      'render:response'(response) {
        // 匹配所有src指向/_nuxt/路径的script标签
        response.body = response.body.replace(
          /<script\s+([^>]*src="\/_nuxt\/[^"]*"[^>]*)><\/script>/g,
          (match, originAttrs) => {
            // 避免重复插入目标属性
            if (originAttrs.includes('someAttribute')) return match
            // 插入自定义属性后返回新的标签
            return `<script someAttribute ${originAttrs}></script>`
          }
        )
      }
    }
  }
})

Nuxt2 实现 #

Nuxt2对应的渲染钩子在顶层hooks配置中，同样在路由HTML生成完成后做属性替换，示例配置：

export default {
  hooks: {
    'render:route'(url, routeResult) {
      routeResult.html = routeResult.html.replace(
        /<script\s+([^>]*src="\/_nuxt\/[^"]*"[^>]*)><\/script>/g,
        (match, originAttrs) => {
          if (originAttrs.includes('someAttribute')) return match
          return `<script someAttribute ${originAttrs}></script>`
        }
      )
    }
  }
}

注意事项 #

• 上述方案的替换逻辑在服务端渲染输出HTML阶段执行，完全不影响脚本本身的加载顺序、执行逻辑，仅对标签属性做补充，和手动在HTML里写的属性效果完全一致
• 不要选择客户端DOM操作的方案补属性：<head>内的脚本是按HTML流顺序加载的，等客户端执行自定义DOM操作逻辑时，目标脚本往往已经进入加载流程，无法保证自定义属性在脚本加载前生效
• 正则匹配可根据实际需求调整范围，比如需要给所有脚本（包括非/_nuxt路径）加属性时，可调整匹配规则的匹配条件

内容的提问来源于stack exchange，提问作者yahms23