时间戳

首页 > 解决方案 > vue组件中如何使用本地js文件？

vue.js - vue组件中如何使用本地js文件？

问题描述

我有一个动画 js 文件，我正在尝试在特定的 vue 组件上使用它。我尝试使用 import、required 和mounted()，但到目前为止都没有奏效

 <template>
 <div class="home">
<audio controls="controls" src="../assets/raindrops-in-the-ocean.mp3"></audio>
<canvas id="canvas"></canvas>
 </div>
</template>
   <script>
    require('../assets/raindrops.js');

     export default {
     name: 'raindrops-in-the-ocean',
     components: {
     },
created() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', '../assets/raindrops.js')
document.head.appendChild(recaptchaScript)
},
}
</script>

标签： vue.js

解决方案

通过使用以下导入语句，您可以使用本地 javascript 文件：

<script>
    import '../assets/raindrops.js';
    
    export default {
        name: 'raindrops-in-the-ocean',
        components: {},
        created() {
            let recaptchaScript = document.createElement('script')
            recaptchaScript.setAttribute('src', '../assets/raindrops.js')
            document.head.appendChild(recaptchaScript)
        },
    } 
</script>

注意：建议使用相对路径而不是绝对路径来导入任何文件

推荐阅读