如何在Vue Nuxt 3项目中引入外部JavaScript（StatCounter）？

方法一：通过nuxt.config.ts全局配置 #

直接在项目根目录的nuxt.config.ts中配置全局头部脚本，代码会自动注入到所有页面的<head>标签内：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        // 先定义Statcounter的全局变量
        {
          innerHTML: `
            var sc_project=XXXXXXXX; 
            var sc_invisible=1; 
            var sc_security="XXXXXXXX"; 
          `,
          type: 'text/javascript',
          body: false // 确保在<head>中加载，优先于后续脚本
        },
        // 加载Statcounter的统计脚本
        {
          src: 'https://www.statcounter.com/counter/counter.js',
          async: true,
          type: 'text/javascript'
        }
      ],
      noscript: [
        // 添加noscript备用内容，适配禁用JS的场景
        {
          innerHTML: `
            <div class="statcounter">
              <a title="Web Analytics Made Easy - Statcounter" href="https://statcounter.com/" target="_blank">
                <img class="statcounter" src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/" alt="Web Analytics Made Easy - Statcounter" referrerPolicy="no-referrer-when-downgrade">
              </a>
            </div>
          `
        }
      ]
    }
  }
})

注意：将代码中的XXXXXXXX和XXXXXX替换为你自己的Statcounter账号专属信息。

方法二：在app.vue中使用useHead组合式API #

如果需要更灵活的加载控制（比如仅在特定页面启用），可以在app.vue中使用Nuxt 3提供的useHead钩子：

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<script setup>
useHead({
  script: [
    {
      innerHTML: `
        var sc_project=XXXXXXXX; 
        var sc_invisible=1; 
        var sc_security="XXXXXXXX"; 
      `,
      type: 'text/javascript',
      body: false
    },
    {
      src: 'https://www.statcounter.com/counter/counter.js',
      async: true,
      type: 'text/javascript'
    }
  ],
  noscript: [
    {
      innerHTML: `
        <div class="statcounter">
          <a title="Web Analytics Made Easy - Statcounter" href="https://statcounter.com/" target="_blank">
            <img class="statcounter" src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/" alt="Web Analytics Made Easy - Statcounter" referrerPolicy="no-referrer-when-downgrade">
          </a>
        </div>
      `
    }
  ]
})
</script>

关键注意事项 #

• 必须保证全局变量脚本在counter.js之前加载，否则会出现变量未定义的错误。
• 若只想在生产环境加载统计代码，可通过环境变量判断：

  useHead({
    script: process.env.NODE_ENV === 'production' ? [/* 脚本配置 */] : []
  })
  

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