Vue <script setup>中引入Atlassian组件失效问题求助

下面是几个可行的排查和解决方向：

1. 避免重复加载脚本 #

每次组件onMounted时都创建新脚本标签会导致重复加载，而这类嵌入脚本通常仅在首次加载时执行。先检查页面中是否已存在该脚本，不存在再添加：

<template>
  <p>test</p>
</template>
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 检查是否已加载过JSD脚本
  if (!document.querySelector('script[src="https://jsd-widget.atlassian.com/assets/embed.js"]')) {
    const script = document.createElement('script');
    script.dataset.jsdEmbedded = '';
    script.dataset.key = '<key>';
    script.dataset.baseUrl = 'https://jsd-widget.atlassian.com';
    script.src = 'https://jsd-widget.atlassian.com/assets/embed.js';
    document.head.appendChild(script);
  }
});
</script>

2. 手动触发脚本初始化 #

部分嵌入脚本加载后不会自动重新初始化，需要手动调用其全局暴露的方法。可以在脚本加载完成后触发初始化：

<template>
  <p>test</p>
</template>
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const existingScript = document.querySelector('script[src="https://jsd-widget.atlassian.com/assets/embed.js"]');
  if (existingScript) {
    // 如果已加载，尝试手动初始化
    window.JSDWidget?.init?.();
    return;
  }

  const script = document.createElement('script');
  script.dataset.jsdEmbedded = '';
  script.dataset.key = '<key>';
  script.dataset.baseUrl = 'https://jsd-widget.atlassian.com';
  script.src = 'https://jsd-widget.atlassian.com/assets/embed.js';
  // 脚本加载完成后手动初始化
  script.onload = () => {
    window.JSDWidget?.init?.();
  };
  document.head.appendChild(script);
});
</script>

3. 延迟执行脚本确保DOM就绪 #

虽然onMounted表示组件DOM已挂载，但页面若有异步渲染或其他延迟，脚本执行时可能仍无法正确识别环境。可以尝试延迟执行脚本：

<template>
  <p>test</p>
</template>
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 延迟100ms执行，确保DOM完全就绪
  setTimeout(() => {
    const script = document.createElement('script');
    script.dataset.jsdEmbedded = '';
    script.dataset.key = '<key>';
    script.dataset.baseUrl = 'https://jsd-widget.atlassian.com';
    script.src = 'https://jsd-widget.atlassian.com/assets/embed.js';
    document.head.appendChild(script);
  }, 100);
});
</script>

4. 指定挂载容器并关闭样式隔离 #

Vue的Scoped样式可能会意外影响嵌入组件的显示，同时可以给组件指定明确的挂载容器：

<template>
  <div id="jsd-widget-container"></div>
  <p>test</p>
</template>
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.dataset.jsdEmbedded = '';
  script.dataset.key = '<key>';
  script.dataset.baseUrl = 'https://jsd-widget.atlassian.com';
  // 指定挂载容器
  script.dataset.container = '#jsd-widget-container';
  script.src = 'https://jsd-widget.atlassian.com/assets/embed.js';
  document.head.appendChild(script);
});
</script>
<!-- 去掉scoped避免样式隔离，同时给容器设置基础样式 -->
<style>
#jsd-widget-container {
  width: 100%;
  min-height: 400px;
}
</style>

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