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

新手上路,请多包涵

在我们的项目中,我们之前一直在使用 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 许可协议

阅读 415
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题