引入3dmol包时遇到问题,如何解决?
在vue项目中引入3dmol包时,可能会遇到以下错误:
error from chokidar (c:\): error: ebusy: resource busy or locked, lstat 'c:\dumpstack.log.tmp'
解决方案:
将3dmol包的cdn地址放置在index.html文件中,而不是放在.vue组件的script标签中。
修改后的index.html
立即学习“前端免费学习笔记(深入)”;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>oc</title>
</head>
<body>
<div id="app"></div>
<script src="https://3dmol.csb.pitt.edu/build/3dmol-min.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>修改后的app.vue
<template>
<div id="container-01" class="mol-container"></div>
</template>
<script setup>
import { nextTick, onMounted } from 'vue'
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>
.mol-container {
width: 60%;
height: 400px;
position: relative;
}
</style>










