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

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

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

但是，如果您确实需要在组件中嵌入任何第三方脚本，则可以采用一种简洁的方法来执行此操作。

首先，为脚本创建容器：

<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的{{1}} Vue App根DOM元素。

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

Answer 2

您可以尝试使用此软件包

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

Answer 3

我制作了一个vue组件来处理模板标签中的脚本加载。

我个人使用它在vuejs应用中加载广告。

此处：

https://github.com/TheDynomike/vue-script-component

Answer 4

有工作。也可以与style标签一起使用。

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

模板中包含脚本标记的广告[Vue.js]

4 个答案: