Vue项目集成3Dmol.js遇到的问题及解决方法
在Vue项目中使用3Dmol.js库时，常常遇到加载失败的问题，报错信息类似：
this dependency was not found: !!babel-loader!https://3dmol.csb.pitt.edu/build/3dmol-min.js
这是因为Vue的构建流程与3Dmol.js的加载方式冲突。 直接在.vue组件的<script>标签中引入3Dmol.js通常无效。</script>
正确的解决方法是：通过CDN在index.html中引入3Dmol.js。
立即学习“前端免费学习笔记（深入）”；
修改index.html:
在
标签内添加以下代码，引入3Dmol.js CDN链接：<script src="https://3dmol.csb.pitt.edu/build/3dmol-min.js"></script>
修改app.vue (或你的组件文件):
确保你的组件能够正确访问全局的$3Dmol对象。 以下是一个示例：
<template>
<div class="mol-container" id="container-01"></div>
</template>
<script>
import { onMounted, nextTick } from 'vue';
export default {
setup() {
onMounted(() => {
nextTick(() => {
const element = document.querySelector('#container-01');
const config = { backgroundColor: 'orange' };
const 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);
});
});
return {};
},
};
</script>
<style scoped>
.mol-container {
width: 60%;
height: 400px;
position: relative;
}
</style>通过这种方法，就可以在Vue项目中正确加载并使用3Dmol.js库，避免加载失败的错误。 请确保你的网络连接正常，并且CDN链接有效。
以上就是Vue中引入3Dmol包报错：如何正确加载3Dmol-min.js？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
571
