模板中带有脚本标签的广告[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广告执行此操作,但它们不适用于我们.转义脚本标记<\/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>

Answer 1

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

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

Answer 2

您不应将Vue模板视为最终HTML，尽管它们的语法几乎相同，并且也符合HTML语法。

模板只是数据的UI支架（这就是为什么它被称为数据驱动范例）。它们被解析并转换为渲染函数，最终将生成最终的和反应性的DOM树。在此过程中，<script>标记确实被省略了，因为它不是发生任何逻辑的地方。

但是，如果您确实需要在组件中嵌入任何第3方脚本，则有一种巧妙的方法。

首先，为脚本创建容器：

<template>
    <div id="component-root">
        <!-- (...) -->
        <div v-el:script-holder></div>
    </div>
</template>

然后动态创建<script>标记并将其直接插入到DOM树中（使用纯Vanilla JS）：

<script>
    export default {
        data () {
            return {};
        },
        ready() {
             let scriptEl = document.createElement('script');
             scriptEl.setAttribute('src', 'https://cdn.com/somescript.js');
             scriptEl.setAttribute('data-some-param', 'paramvalue');
             this.$els.scriptHolder.appendChild(scriptEl);
        },
    }
</script>

该this.$els.scriptHolder收益实际的DOM元素，调用appendChild()强制浏览器插入DOM节点并运行该脚本就像普通的HTML代码渲染过程中。

取而代之的是，$els您还可以使用$el返回组件根DOM元素（在本例中为<div id="component-root">）的方法，甚至使用$root.$el返回Vue App根DOM元素的方法。

请注意，这this.$els是Vue 1功能，已$refs在Vue 2中替换为：https：//vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Answer 3

你可以试试这个包

https://www.npmjs.com/package/vue-script2