模板中带有脚本标签的广告 \[Vue.js\]

Question

在我们的项目中，我们之前一直在使用 Thymeleaf，但现在我们转向 Vue.js，我们在使用相同的广告脚本时遇到了一些问题。脚本看起来像这样。我只更改了网址。

 <script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
<script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>

如果我们将这些标签放在 <template> 中，Webpack 会给出以下消息：

模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如 ，因为它们不会被解析。

所以我一直在谷歌上搜索以找到类似的案例。有一些插件可以为 Google Ads 执行此操作，但它们对我们不起作用。转义脚本标签 <\/script> 以某种方式工作，但脚本直到加载 后才 添加到 DOM，因此它不会运行。

有没有人遇到过类似的问题？如果是这样，您的解决方案是什么？

Vue 文件看起来像这样：

 <template>
  <aside class="sidebar-ad ui-wide">
    <script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
    <script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>
  </aside>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

原文由 Watercolours 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个解决方法。也适用于 style 标签。

 <component is="script" src="https://www.example.com/example.js" async></component>

原文由 Eugen Govorun 发布，翻译遵循 CC BY-SA 4.0 许可协议