Nuxt3中第三方脚本OptinMonster仅在首次访问和手动刷新时生效

问题原因 #

Nuxt3作为单页应用（即使是静态站点，客户端路由仍为无刷新跳转），首次访问页面时head中配置的OptinMonster脚本会加载并初始化，但通过应用内路由跳转至其他页面时，页面不会刷新，脚本不会重新执行，导致OptinMonster营销活动无法触发。

解决方案 #

通过监听Nuxt路由变化，在每次路由切换完成后手动触发OptinMonster的初始化方法，确保活动能正常显示。

方法1：使用Nuxt客户端插件 #

1. 在项目根目录创建plugins/optinmonster.client.js（.client.js后缀确保仅在客户端运行）：

export default defineNuxtPlugin(() => {
  const router = useRouter()

  // 监听路由切换完成事件
  router.afterEach(() => {
    // 检查全局的OptinMonster API对象是否存在
    if (typeof window !== 'undefined' && window.omapi) {
      // 重新初始化OptinMonster
      window.omapi.init()
      // 若初始化无效，可尝试先清除再初始化：
      // window.omapi.clear()
      // window.omapi.init()
    }
  })
})

2. 保留原有的nuxt.config.ts中的head配置不变：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://a.omappapi.com/app/js/api.min.js',
          async: true,
          defer: true,
          'data-user': 2345,
          'data-account': 3453,
          type: 'text/javascript'
        }
      ]
    }
  }
})

方法2：在app.vue中直接处理 #

在app.vue中通过useHead配置脚本，并监听路由变化：

<script setup>
import { useRouter, useHead } from 'nuxt/app'

const router = useRouter()

// 配置OptinMonster脚本
useHead({
  script: [
    {
      src: 'https://a.omappapi.com/app/js/api.min.js',
      async: true,
      defer: true,
      'data-user': 2345,
      'data-account': 3453,
      type: 'text/javascript',
      // 首次加载完成后初始化
      onload: () => {
        if (window.omapi) {
          window.omapi.init()
        }
      }
    }
  ]
})

// 路由切换后重新初始化
router.afterEach(() => {
  if (window.omapi) {
    window.omapi.init()
  }
})
</script>

注意事项 #

• 若window.omapi.init()无效，可查阅OptinMonster官方文档，替换为对应的活动渲染方法
• 确保仅在客户端执行相关逻辑，避免服务端渲染时出现window未定义的错误
• 静态生成（SSG）模式下，该方案同样适用，因为客户端路由仍为无刷新跳转

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