Nuxt 3中如何向head标签内添加script脚本块？

Nuxt 3 内置了原生的head管理能力，不需要引入第三方依赖，按下面两种场景选对应方案即可，最终渲染结果完全匹配你给出的示例脚本结构。

单页面/局部组件内添加 #

在需要插入脚本的页面/组件的<script setup>块中，直接调用useHead组合式API配置脚本即可：

<script setup lang="ts">
useHead({
  script: [
    {
      innerHTML: "alert('hello, world!');",
      tagPosition: 'head' // 强制将脚本插入到<head>标签内
    }
  ]
})
</script>

配置完成后构建渲染，对应的head区域会直接生成如下代码，和你给出的示例完全一致：

<script>alert('hello, world!');</script>

全局所有页面生效 #

如果需要全站所有页面的head都插入该脚本，直接修改项目根目录的nuxt.config.ts配置文件即可：

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: "alert('hello, world!');",
          tagPosition: 'head'
        }
      ]
    }
  }
})

注意事项 #

• 不要直接在Vue模板的<Head>组件内手写<script>标签，会出现Vue转义、水合不匹配、脚本重复执行的问题，上述官方API方案是最稳定的实现方式
• 如果脚本内用到window/document等浏览器专属API，不需要额外加客户端判断，Nuxt会自动将这类内联脚本仅在客户端侧注入执行，不会触发服务端渲染报错
• 如果需要给脚本加自定义属性（比如async/defer/自定义id），直接在script配置项里加对应键值对即可

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