能否手动将外部脚本（如Bootstrap CDN）插入VueJS组件？

是的，你完全可以手动引入像Bootstrap CDN这类外部JS脚本到Vue组件中，根据你的需求不同，有几种常用的实现方式：

1. 全局引入（适合全项目复用的脚本） #

如果这个脚本是项目中多个组件都需要用到的，最简单的方式就是直接在项目根目录的index.html文件里添加脚本标签，放在<head>或者<body>标签的末尾都可以：

<!-- 示例：在index.html的body末尾引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

这样整个项目的所有组件都能访问到该脚本提供的功能，不需要在每个组件里单独处理。

2. 组件内动态按需引入（适合仅单个/少数组件需要的脚本） #

如果脚本只在特定组件中使用，为了避免全局加载增加初始资源体积，可以在组件的生命周期钩子中动态创建脚本标签并插入到DOM中。以Vue 2的选项式API为例：

<template>
  <div>
    <!-- 你的组件内容 -->
    <button id="myModalBtn" class="btn btn-primary">打开模态框</button>
    <div class="modal fade" id="exampleModal">
      <!-- 模态框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 先检查是否已经加载过该脚本，避免重复插入
    const existingScript = document.querySelector('script[src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"]');
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js';
      script.async = true; // 开启异步加载，不阻塞页面渲染
      
      // 脚本加载完成后，初始化需要的功能
      script.onload = () => {
        console.log('Bootstrap JS加载完成');
        // 比如初始化模态框
        const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
        document.getElementById('myModalBtn').addEventListener('click', () => {
          myModal.show();
        });
      };
      
      // 将脚本插入到body末尾
      document.body.appendChild(script);
    }
  },
  beforeUnmount() {
    // 可选：组件销毁时移除脚本，避免不必要的内存占用
    const script = document.querySelector('script[src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"]');
    if (script) {
      document.body.removeChild(script);
    }
  }
}
</script>

如果是Vue 3的组合式API，只需要把逻辑放到onMounted和onBeforeUnmount钩子中即可，写法类似。

一些需要注意的小细节 #

• 依赖顺序：如果外部脚本依赖其他资源（比如旧版Bootstrap依赖jQuery），一定要确保依赖脚本先加载完成。可以通过onload回调控制加载顺序，或者给脚本添加defer属性保证按顺序执行。
• 重复加载问题：动态创建脚本时，记得先检查DOM中是否已经存在该脚本标签，避免组件多次挂载时重复插入。
• SSR场景：如果你的Vue项目是服务端渲染（比如Nuxt.js），动态创建DOM元素的方式可能需要调整，建议参考对应框架的静态资源引入规范。

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