全局脚本 - Nuxt Scripts 中文文档

背景

虽然 Nuxt 配置中的 app.head 方法允许加载全局脚本，但这可能比较繁琐且需要手动优化。

export default defineNuxtConfig({
  head: {
    script: [ { src: 'https://analytics.com/tracker.js',  async: true } ]
  }
})

现在有一种更简单的方法：直接将脚本 URL 输入到 scripts.globals 中。您还可以包含可选设置，以针对特定优化自定义脚本加载过程。

您可以考虑在以下情况下使用全局脚本：

脚本不是支持的注册脚本。
您不关心与第三方脚本提供的 API 交互（例如，您不需要使用 Google Analytics 的 gtag）。
您确实与第三方脚本提供的 API 交互，但不关心类型安全。

否则，建议使用 useScript 以更安全的方式加载脚本。

用法

globals 键支持字符串、对象和数组。

示例：仅使用 src 加载脚本

export default defineNuxtConfig({
  scripts: {
    globals: {
      myScript: 'https://analytics.com/tracker.js',
    }
  }
})

示例：加载脚本同时提供额外的脚本属性

export default defineNuxtConfig({
  scripts: {
    globals: {
      myScript: {
        src: 'https://example.com/script.js',
        integrity: 'sha256-abc123',
      }
    }
  }
})

您还可以将脚本作为数组提供，这允许您传递脚本选项。

export default defineNuxtConfig({
  scripts: {
    globals: {
      myScript: [
        { src: 'https://example.com/script.js' },
        // 将脚本作为 hydration 过程的一部分加载，而非在空闲时加载
        { trigger: 'client' }
      ]
    }
  }
})

访问全局脚本

所有 Nuxt 脚本都注册在 $scripts Nuxt 应用属性上。

对于通过 nuxt.config 注册的脚本，支持类型自动补全。

<script setup lang="ts">
const { $scripts } = useNuxtApp()
$scripts.myScript // { $script, instance }
</script>

工作原理

globals 配置将用于创建一个虚拟 Nuxt 插件，该插件使用 useScript 组合式函数加载脚本。

由于底层使用了 useScript，了解 useScript 组合式函数的默认值和行为非常重要。

export default defineNuxtConfig({
  scripts: {
    globals: {
      tracker: 'https://analytics.com/tracker.js',
    }
  }
})

<script setup lang="ts">
// 由于是通过 nuxt.config 全局脚本注册，这不会再次触发脚本加载
const { proxy, onLoaded } = useNuxtApp().$scripts.tracker

onLoaded(() => {
  console.log('脚本已加载')
})

function trackCustom() {
  proxy.track('custom_event')
}
</script>

<template>
  <button @click="trackCustom">
    追踪自定义事件
  </button>
</template>

脚本事件页面

了解如何向您的分析提供商发送页面事件。

门面组件

门面组件是伪造的 UI 元素，一旦第三方脚本加载后会被替换。