编程新手咨询：Nuxt.js项目中插入第三方广告代码的方法

Hey there! Let's break down how to add that ad script to your Nuxt.js project properly. Since your ad code is a self-executing function (not just a simple external script reference), we have a couple of reliable options to make this work:

方法1：全局配置（通过nuxt.config.js） #

If you want the ad script to load on every page of your app, you can add it to your global nuxt.config.js setup. Here's how to adapt your code to fit Nuxt's head configuration:

export default {
  head: {
    script: [
      {
        // Assign an ID to target this script for sanitizer bypass
        id: 'ad-zone-script',
        // Paste your entire self-executing function here
        innerHTML: `(function(s,u,z,p){s.src=u,s.setAttribute('data-zone',z),p.appendChild(s);})(document.createElement('script'),'https://iclickcdn.com/tag.min.js',4760985,document.body||document.documentElement)`,
        // Match the original behavior by placing the script at the end of <body>
        body: true
      }
    ],
    // Critical: Disable sanitization for this script's innerHTML, otherwise Nuxt will escape the code
    __dangerouslyDisableSanitizersByTagID: {
      'ad-zone-script': ['innerHTML']
    }
  },
  // Your other Nuxt config goes here...
}

关键说明： #

• The innerHTML field lets you inject the raw self-executing function code directly.
• __dangerouslyDisableSanitizersByTagID is necessary because Nuxt automatically sanitizes HTML content to prevent XSS risks. We're only disabling it for this specific script ID to keep things safe.
• body: true ensures the script loads at the end of the <body> tag, just like your original code intended.

方法2：局部加载（在特定页面/组件中） #

If you only need the ad to appear on specific pages, it's better to load the script directly in that page's component. This keeps your global config clean and avoids unnecessary loads on other pages:

<template>
  <!-- Your page content here -->
</template>

<script>
export default {
  // The mounted hook runs after the component is rendered on the client
  mounted() {
    // Copy-paste your original ad code directly here
    (function(s,u,z,p){
      s.src = u;
      s.setAttribute('data-zone', z);
      p.appendChild(s);
    })(document.createElement('script'), 'https://iclickcdn.com/tag.min.js', 4760985, document.body || document.documentElement);
  }
}
</script>

为什么这有效？ #

The mounted lifecycle hook in Vue runs only on the client side (after the DOM is ready), which is perfect for executing scripts that manipulate the DOM—just like your ad code does. This behaves exactly as if you'd pasted the script directly into an HTML file.

Quick note for Nuxt 3 users: #

If you're using Nuxt 3, the global config approach is slightly different (you'll use nuxt.config.ts and the app.head object), but the core logic of using innerHTML and disabling sanitization for the script ID remains the same. For local loading, you'd use the onMounted composable instead of the Options API mounted hook.

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