指南
全局脚本
加载全局第三方脚本，并为您的 Nuxt 应用优化它们。
背景
虽然 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' },
// load the script as part of the hydration process instead of on idle
{ 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',
}
}
})