Javascript 如何在Vue中使用脚本标记加载第三方元素？

我正在建立一个网站，并希望显示一个小部件链接到BuzzSprout的播客。我在尝试设计时用HTML构建了该网站，现在正试图将其转换为VueJS

仅在HTML中，这是显示小部件的元素和脚本标记：

    <div id="buzzsprout-large-player-1717833"></div>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large"
    ></script>

---

最好使用JS将

标记插入页面-您可以在组件的

created（）

钩子中添加类似的内容，例如：

const scriptTag = document.createElement('script');
scriptTag.src = 'https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&player=large';
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);

---

您可以将HTML片段保留在组件模板中：

您可以显示vue组件代码吗？记住，在生命周期挂钩运行之前，DOM元素在浏览器中不可用。@brychowitson更新了问题-非常小的Vue代码，因为我刚刚对其进行了更改。这已经解决了问题，谢谢！

const scriptTag = document.createElement('script');
scriptTag.src = 'https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&player=large';
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);