在 Vue.js 应用程序中动态加载 JavaScript 脚本答案

【问题标题】：Loading a JavaScript script dynamically in a Vue.js app在 Vue.js 应用程序中动态加载 JavaScript 脚本
【发布时间】：2020-09-12 09:24:59
【问题描述】：

如何在 Vue.js 应用中动态加载 JavaScript 脚本？

这是一个幼稚的解决方案：

    <script async v-bind:src="srcUrl"></script>
    <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->

但第一行不会加载脚本（它不会将script 元素添加到 HTML）。

第二行有效。第二行相同，只是将 app 变量替换为纯文本 (srcUrl => https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37)。

我的错在哪里？

供参考的完整演示（它应该在空白页面上加载谷歌自定义搜索引擎）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="load-script">
    <div>{{ srcUrl }}</div>
    <div class="gcse-searchbox"></div>
    <div class="gcse-searchresults"></div>
    <script async v-bind:src="srcUrl"></script>
    <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
    new Vue({
        el: '#load-script',
        data: {
            srcUrl: "https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"
        }
    });
</script>
</body>
</html>

我找到了相关问题，但它们似乎并没有准确描述这种情况：

【问题讨论】：

你试过我下面的答案了吗？
@terrymorse 我做到了，特里。如果有人建议使用绑定的原生 Vue.js 解决方案，让我们稍等片刻。当脚本依赖于用户操作时，动态添加和删除它是 Vue.js 可能会处理的事情。

标签： javascript html vue.js

【解决方案1】：

您可以随时向 DOM 动态添加 <script> 元素。

如果您使用的是 Vue，则可以在页面加载时使用其mounted 属性将脚本添加到 load-script div：

Vue({
  mounted: function () {
    let divScripts = document.getElementById('load-script');
    let newScript = document.createElement('script');
    newScript.src = 'https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37';
    divScripts.appendChild(newScript);
  }
});

替代方法 - 使用 LoadScript

作为向mounted Vue 属性添加函数的替代方法，有一个名为LoadScript 的简单Vue 插件可以加载和卸载脚本。

import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);

加载脚本：

Vue.loadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
  .then(() => {
    // do something after script loads
  })
  .catch(() => {
    // do something if load fails
  });

卸载脚本：

Vue.unloadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
  .then(() => {
    // do something after script unloads
  })
  .catch(() => {
    // do something if unload fails
  });

【讨论】：