javascript - 模板中带有脚本标签的广告 [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 给出以下信息:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

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

Answer 1

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

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