Vue项目外部图标脚本加载后图标不显示，热重载后正常的问题

这种情况我开发时也碰到过！核心原因大概率是你引入的外部图标脚本在Vue组件挂载完成前就执行了——此时Vue还没把对应的DOM节点渲染出来，脚本找不到要插入图标的目标元素，自然就显示为空；而热重载时组件已经完成挂载，DOM节点存在，脚本重新执行就能顺利找到节点并渲染图标。

给你几个靠谱的解决方案：

• 动态延后脚本加载时机
  不要直接在index.html或者App.vue的<script>标签里静态引入脚本，而是在App.vue的mounted钩子中动态创建脚本标签加载，确保DOM已经准备好：

  <script>
  export default {
    mounted() {
      // 创建脚本元素
      const iconScript = document.createElement('script');
      // 设置脚本路径
      iconScript.src = '你的外部图标脚本URL';
      // 异步加载避免阻塞
      iconScript.async = true;
      // 添加到页面
      document.body.appendChild(iconScript);
    }
  }
  </script>
  

• 手动调用脚本的初始化方法
  部分图标库的脚本会提供初始化函数，需要主动触发才能渲染图标。这种情况下，你可以在脚本加载完成后手动调用这个方法：

  <script>
  export default {
    mounted() {
      const iconScript = document.createElement('script');
      iconScript.src = '你的外部图标脚本URL';
      // 脚本加载完成后执行初始化
      iconScript.onload = () => {
        // 假设脚本暴露了window.initIcons方法
        if (window.initIcons) {
          window.initIcons();
        }
      };
      document.body.appendChild(iconScript);
    }
  }
  </script>
  

• 排查脚本内部逻辑
  可以打开外部js文件看看，是不是脚本一开始就直接通过document.querySelector或getElementById查找DOM元素。如果是这种写法，首次加载时目标元素还没被Vue渲染，脚本自然找不到节点。用上面两种方法延后执行时机，就能解决这个问题。

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