微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在Nuxt模板中注入的脚本标签可在Localhost中使用,但不能在生产部署中使用

如何解决在Nuxt模板中注入的脚本标签可在Localhost中使用,但不能在生产部署中使用

目前,我正在UNIVERSAL模式下在Netlify上使用NUXT进行Jamstack电子商务。 一切都进行得很好,直到遇到一个大问题为止,我正在尝试从Mercado Pago实施第三方结帐。 Doc from MP Button

做到这一点的方法是使用带有脚本标签的表单标签

   <form method="POST" ref="mpBtn" id="mpBtn" :action="formAction">
      <script
        src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
        data-preference-id="654853549-4154ee41-3993-432a-a273-a45a9c23c559"
        data-header-color="#e8e6d6"
        data-elements-color="#e8e6d6"
        data-button-label="PAGAR"
      ></script>
    </form>

它在开发人员中完全正常,但是一旦我投入生产,脚本标签就会消失。 我想这种行为来自NUXT LYFECYCLE,因为我设法在netlify中的纯HTML测试中呈现了最终结果。 因此,我创建了一个测试页,以便您可以查看发生了什么。

Netlify中的纯HTML测试

https://cocky-bhabha-60a57b.netlify.app/

Netlify中的Nuxt测试

https://mystifying-pasteur-2f64d9.netlify.app/

在Localhost中进行Nuxt测试

in this Test in Localhost,you can see the button,it works!

测试

我已经尝试通过v-if指令将其动态呈现为组件,而在mount()时将其值设置为true,或者在安装后在div内将脚本创建为内部HTML。 我还尝试使用nuxt的代码段,以便该组件只能在客户端呈现,没有任何运气。

测试资料库

在这里您可以找到我的Nuxt测试代码https://github.com/WolfPath/nuxtbutton-test

我想它的生命周期一定是有的。但是我现在不知道了。如果有人可以给我提示,我将不胜感激。

谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。