Vue3 <script setup>中加载外部Tokenizer脚本的问题及解决方案

问题背景 #

在Vue3 + InertiaJS + Laravel项目中实现令牌化支付表单时，遇到两个核心问题：

• 加载外部Tokenizer脚本后，在<script setup>中实例化时频繁抛出Tokenizer is not defined错误，仅偶尔通过浏览器回退再返回能正常运行。
• 调整为在onMounted钩子中加载脚本并在onload回调初始化后，表单可正常渲染，但点击「Submit Payment」按钮时出现Uncaught TypeError: can't access property "submit", _ctx.tokenizer is undefined错误。

分步排查与解决 #

1. 解决脚本加载时机问题 #

最初的Tokenizer is not defined错误源于脚本加载时机与组件初始化不同步。将脚本加载逻辑移至onMounted钩子中，确保DOM挂载完成后再加载外部脚本，并在onload回调中初始化Tokenizer，解决了脚本未就绪就实例化的问题：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = '外部Tokenizer脚本URL'
  script.onload = () => {
    // 此处曾在函数内部定义tokenizer
    // const tokenizer = new Tokenizer({...配置项})
    // tokenizer.mount('#payment-form')
  }
  document.head.appendChild(script)
})
</script>

2. 解决作用域访问问题 #

调整后表单能正常加载，但点击提交时出现tokenizer is undefined，原因是tokenizer变量被定义在onload回调函数内部，属于局部作用域，组件其他方法无法访问。

将tokenizer声明为<script setup>的顶层变量，使其成为组件可全局访问的变量，即可解决该问题：

<script setup>
import { onMounted } from 'vue'

// 声明为顶层变量，扩大作用域
let tokenizer = null

onMounted(() => {
  const script = document.createElement('script')
  script.src = '外部Tokenizer脚本URL'
  script.onload = () => {
    tokenizer = new Tokenizer({
      // 填入你的配置参数，比如public key、表单选项等
    })
    tokenizer.mount('#payment-form')
  }
  script.onerror = () => {
    console.error('Tokenizer脚本加载失败')
  }
  document.head.appendChild(script)
})

// 提交支付的方法
const handleSubmit = () => {
  if (tokenizer) {
    tokenizer.submit()
      .then(result => {
        // 处理支付令牌结果，比如传给后端
      })
      .catch(error => {
        console.error('支付提交失败:', error)
      })
  }
}
</script>

<template>
  <div id="payment-form"></div>
  <button @click="handleSubmit">Submit Payment</button>
</template>

总结 #

• 外部第三方脚本需确保在DOM挂载完成后加载，避免因脚本未就绪导致的未定义错误。
• 在Vue3的<script setup>中，若组件多个方法需访问同一实例，需将实例变量声明为顶层作用域变量，避免局部作用域导致的访问失败。

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