Nuxt.js如何实现在每个页面的head标签中运行指定全局函数

你之前直接在nuxt.config.js的head配置中添加脚本失效，核心原因是Nuxt默认会对head内的script内容做安全转义，导致自定义函数语法被破坏，无法正常执行。以下两种方案都可以实现无需逐页配置的需求：

方案1：全局布局配置（推荐，兼容性最好） #

所有页面默认继承layouts/default.vue的配置，直接在该文件内注入head脚本即可覆盖所有页面：

Nuxt2 写法 #

<!-- layouts/default.vue -->
<script>
export default {
  head() {
    return {
      script: [
        {
          // 直接写入你的函数逻辑，也可以直接调用你已经通过插件注册的全局函数
          innerHTML: `
            window.customGlobalFunc = () => {
              // 你的函数业务逻辑
            }
            // 页面加载时立即执行
            customGlobalFunc()
          `,
          type: 'text/javascript'
        }
      ],
      // 禁用script内容转义，必须加否则函数语法会被破坏
      __dangerouslyDisableSanitizers: ['script']
    }
  }
}
</script>

Nuxt3 写法 #

<!-- layouts/default.vue -->
<script setup>
useHead({
  script: [
    {
      innerHTML: `
        window.customGlobalFunc = () => {
          // 你的函数业务逻辑
        }
        customGlobalFunc()
      `
    }
  ]
})
</script>

方案2：现有插件内注入全局head配置 #

不需要修改布局文件，直接在你已经配置的全局插件内补充head注入逻辑即可：

Nuxt2 插件写法 #

// plugins/你的插件文件.js
export default ({ app }, inject) => {
  // 你原有注册全局函数的逻辑
  const customGlobalFunc = () => {
    console.log('全局函数执行')
  }
  inject('customGlobalFunc', customGlobalFunc)

  // 全局注入到所有页面的head中
  app.head = app.head || {}
  app.head.script = app.head.script || []
  app.head.script.push({
    innerHTML: `(${customGlobalFunc.toString()})()`,
    type: 'text/javascript'
  })
  // 禁用转义
  app.head.__dangerouslyDisableSanitizers = app.head.__dangerouslyDisableSanitizers || []
  app.head.__dangerouslyDisableSanitizers.push('script')
}

Nuxt3 插件写法 #

// plugins/你的插件文件.client.js
export default defineNuxtPlugin(() => {
  const customGlobalFunc = () => {
    console.log('全局函数执行')
  }
  // 注册全局可调用函数
  return {
    provide: {
      customGlobalFunc
    }
  }
  // 注入到所有页面head
  useHead({
    script: [
      {
        innerHTML: `(${customGlobalFunc.toString()})()`
      }
    ]
  })
})

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