vue引入3Dmol包时出现问题怎样解决?

  • Z时代
  • 2024-03-16
  • 分类：IT

vue引入3Dmol包时出现问题

This dependency was not found:                                                                             
* !!babel-loader!https://3Dmol.csb.pitt.edu/build/3Dmol-min.js in ./src/App.vue                            
To install it, you can run: npm install --save !!babel-loader!https://3Dmol.csb.pitt.edu/build/3Dmol-min.js
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

报这个错，之后我这样执行

$ npm install --save !!babel-loader! https://3Dmol.csb.pitt.edu/build/3Dmol-min.js
npm install --save npm run devbabel-loader! https://3Dmol.csb.pitt.edu/build/3Dmol-min.js
npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE 
npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE
npm ERR! request to https://3dmol.csb.pitt.edu/build/3Dmol-min.js failed, reason: unable to verify the first certificate
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\software\node.js\node_cache\_logs\2024-01-08T10_25_07_189Z-debug-0.log

我的代码如下

<template>
  <div  id = "container-01"  class = "mol-container">
  <div v-is="'script'">
    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);
  </div>
  </div>
</template>
<script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
<style>
.mol-container {
  width: 60%;
  height: 400px;
  position: relative;
}
</style>

回答：

把 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>

以上是 vue引入3Dmol包时出现问题怎样解决? 的全部内容， 来源链接： utcz.com/p/935305.html

回到顶部