Vue项目中引入3Dmol包报错：如何正确加载3Dmol库并解决依赖缺失问题？-js教程-PHP中文网

Vue项目中引入3Dmol包报错：如何正确加载3Dmol库并解决依赖缺失问题？

聖光之護

发布： 2025-02-24 19:20:18

原创

662人浏览过

vue项目中引入3dmol包报错：如何正确加载3dmol库并解决依赖缺失问题？

Vue项目中集成3Dmol库：排错指南

在Vue项目中使用3Dmol库时，可能会遇到依赖缺失问题，例如：

<code>this dependency was not found:

* !!babel-loader!https://3dmol.csb.pitt.edu/build/3dmol-min.js in ./src/app.vue</code>

登录后复制

此错误通常源于CDN脚本加载失败。解决方法是将3Dmol库的CDN链接直接添加到项目的index.html文件中，而不是在.vue组件中引入。

正确配置步骤：

立即学习“前端免费学习笔记（深入）”；

包阅AI

论文对照翻译，改写润色，专业术语详解，选题评估，开题报告分析，评审校对，一站式解决论文烦恼！

查看详情

1. 修改index.html文件： 在标签的闭合标签之前添加以下代码：

<code class="html"><script src="https://3dmol.csb.pitt.edu/build/3dmol-min.js"></script></code>

登录后复制

2. app.vue组件代码 (示例): 确保你的app.vue组件能够正确使用已加载的3Dmol库。以下是一个示例：

<code class="vue"><template>
  <div class="mol-container" id="container-01"></div>
</template>

<script>
import { nextTick, onMounted } from 'vue';

export default {
  onMounted() {
    nextTick(() => {
      let element = document.querySelector('#container-01');
      let config = { backgroundColor: 'orange' };
      let viewer = $3Dmol.createViewer(element, config);
      viewer.addSphere({ center: { x: 0, y: 0, z: 0 }, radius: 10.0, color: 'green' });
      viewer.zoomTo();
      viewer.render();
      viewer.zoom(0.8, 2000);
    });
  },
};
</script>

<style scoped>
.mol-container {
  width: 60%;
  height: 400px;
  position: relative;
}
</style></code>

登录后复制

通过以上步骤，确保3Dmol库在Vue项目中正确加载并可用。请注意，确保你的网络连接正常，并且https://3dmol.csb.pitt.edu/build/3dmol-min.js这个链接是可访问的。如果仍然遇到问题，请检查你的网络设置和Vue项目配置。

以上就是Vue项目中引入3Dmol包报错：如何正确加载3Dmol库并解决依赖缺失问题？的详细内容，更多请关注php中文网其它相关文章！