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

Question

How can I load a JavaScript script dynamically in a Vue.js app?如何在 Vue.js 应用程序中动态加载 JavaScript 脚本？

Here's a naive solution:这是一个天真的解决方案：

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

But the first line doesn't load the script (it does not event add the script element to HTML).但是第一行不会加载脚本（它不会将script元素添加到 HTML）。

The second line works.第二行有效。 The second line is identical, just the app variable is replaced with plain text ( srcUrl => https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37 ).第二行是相同的，只是 app 变量被替换为纯文本（ srcUrl => https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37 ）。

Where's my mistake?我的错在哪里？

The full demo for reference (it is supposed to load a Google Custom Search Engine on a blank page):完整的演示供参考（它应该在空白页面上加载谷歌自定义搜索引擎）：

<!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>

I found related questions but they don't seem to describe this situation exactly:我发现了相关的问题，但它们似乎并没有准确地描述这种情况：

Answer 1

You can add a <script> element dynamically to the DOM at any time.您可以随时将<script>元素动态添加到 DOM。

If you're using Vue, you can use its mounted property to add a script to the load-script div when the page is loaded:如果您使用的是 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);
  }
});

Alternate Method — Use LoadScript替代方法 - 使用 LoadScript

As an alternative to adding a function to the mounted Vue property, there is a simple Vue plug-in named LoadScript that loads and unloads scripts.作为将 function 添加到已mounted的 Vue 属性的替代方法，有一个名为LoadScript的简单 Vue 插件可以加载和卸载脚本。

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

To load a script:要加载脚本：

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

To unload a script:卸载脚本：

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

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

问题描述

1 个解决方案

解决方案1
1 2020-05-25 18:11:06

Alternate Method — Use LoadScript替代方法 - 使用 LoadScript

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

问题描述

1 个解决方案

解决方案1 1 2020-05-25 18:11:06

Alternate Method — Use LoadScript替代方法 - 使用 LoadScript

解决方案1
1 2020-05-25 18:11:06