如何在Vue CLI组件中引入多个外部CDN JS文件？已尝试方法未生效

Hey there! Let's break down why your approach isn't working and fix it step by step:

Key Issues With Your Code #

• Duplicate mounted() hooks: In Vue, you can only define one mounted() lifecycle hook per component. Your three separate mounted() definitions are overriding each other—only the last one (loading Bootstrap) actually runs, so jQuery and Popper never get added to the page.
• Duplicate script IDs: All three scripts use the same id="sketchy". Even if the hooks weren't overriding each other, the first script would claim that ID, and the subsequent checks if (document.getElementById('sketchy')) return would skip loading the other two dependencies.
• Unmanaged load order: Bootstrap depends on jQuery and Popper to function properly. You need to ensure these scripts load in the correct sequence (jQuery → Popper → Bootstrap) and that each finishes loading before the next starts.

Fixed Component Code #

Here's a revised version of your component that loads all three scripts correctly, in order, with proper dependency handling:

<template>
  <div id="sketchy-container"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // Reusable helper to load a script with a completion callback
    const loadScript = (src, uniqueId, onLoaded) => {
      // Skip if script is already loaded
      if (document.getElementById(uniqueId)) {
        onLoaded?.();
        return;
      }

      const scriptTag = document.createElement("script");
      scriptTag.src = src;
      scriptTag.id = uniqueId;
      // Run the callback only after the script finishes loading
      scriptTag.onload = onLoaded;
      document.head.appendChild(scriptTag);
    };

    // Load scripts in the required order, chaining with callbacks
    loadScript(
      "https://bootswatch.com/_vendor/jquery/dist/jquery.min.js",
      "jquery-script",
      () => {
        // Load Popper only after jQuery is ready
        loadScript(
          "https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js",
          "popper-script",
          () => {
            // Load Bootstrap only after Popper is ready
            loadScript(
              "https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.min.js",
              "bootstrap-script"
            );
          }
        );
      }
    );
  },
};
</script>

<style scoped></style>

Alternative Approaches to Consider #

1. Add scripts globally in index.html: If these libraries are used across your entire app, it's simpler to include them directly in your project's root index.html file (place them right before the closing </body> tag for better performance):

   <script src="https://bootswatch.com/_vendor/jquery/dist/jquery.min.js"></script>
   <script src="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js"></script>
   <script src="https://bootswatch.com/_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
   

2. Install via npm (Vue-recommended): For a more maintainable solution, install the packages locally and import them into your component or app entry file:
   First run this in your terminal:

   npm install jquery popper.js bootstrap
   

   Then import them in your component or main.js:

   import $ from 'jquery';
   import 'popper.js';
   import 'bootstrap';
   

内容的提问来源于stack exchange，提问作者Muhaddis