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

编程问答 2022-06-04

问题描述

目前，我正在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 (将#修改为@）

html-renderingnetlifynuxt.jsstaticvue.js