如何在Nuxt 3中添加内联script标签？集成Piwik与Intercom遇问题

一、使用useHead()注入内联脚本 #

可以在根组件app.vue或全局布局组件中通过useHead()组合式API注入内联脚本，实现全局生效：

<script setup>
useHead({
  script: [
    // Piwik 内联脚本
    {
      innerHTML: `
        var _paq = window._paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
          var u="//your-piwik-domain.com/";
          _paq.push(['setTrackerUrl', u+'matomo.php']);
          _paq.push(['setSiteId', 'YOUR_SITE_ID']);
          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
          g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
      `,
      body: true, // 可选：将脚本放在body末尾，避免阻塞页面渲染
      type: 'text/javascript'
    },
    // Intercom 内联脚本
    {
      innerHTML: `
        window.intercomSettings = {
          app_id: "YOUR_INTERCOM_APP_ID"
        };
        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/YOUR_INTERCOM_APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
      `,
      body: true,
      type: 'text/javascript'
    }
  ],
  // 可选：配置内容安全策略（CSP），避免脚本被浏览器拦截
  meta: [
    {
      httpEquiv: 'Content-Security-Policy',
      content: "script-src 'self' 'unsafe-inline' your-piwik-domain.com widget.intercom.io;"
    }
  ]
})
</script>

二、在Nuxt配置文件中全局注入 #

如果希望脚本在所有页面自动加载，可直接在nuxt.config.ts的app.head中配置：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        // Piwik 内联脚本
        {
          innerHTML: `
            var _paq = window._paq = window._paq || [];
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            (function() {
              var u="//your-piwik-domain.com/";
              _paq.push(['setTrackerUrl', u+'matomo.php']);
              _paq.push(['setSiteId', 'YOUR_SITE_ID']);
              var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
              g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
            })();
          `,
          body: true,
          type: 'text/javascript'
        },
        // Intercom 内联脚本
        {
          innerHTML: `
            window.intercomSettings = {
              app_id: "YOUR_INTERCOM_APP_ID"
            };
            (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/YOUR_INTERCOM_APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
          `,
          body: true,
          type: 'text/javascript'
        }
      ],
      // 可选：配置CSP
      meta: [
        {
          httpEquiv: 'Content-Security-Policy',
          content: "script-src 'self' 'unsafe-inline' your-piwik-domain.com widget.intercom.io;"
        }
      ]
    }
  }
})

关键注意事项 #

• 替换占位符：将YOUR_SITE_ID、your-piwik-domain.com、YOUR_INTERCOM_APP_ID替换为你的实际配置信息。
• CSP适配：如果站点启用了内容安全策略，必须允许'unsafe-inline'或使用nonce授权内联脚本，否则脚本会被浏览器拦截。
• 加载时机：body: true会将脚本放在</body>标签前，适合依赖DOM加载的脚本；如果脚本无需等待DOM，可移除该属性将脚本放在<head>中。

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