vue+webpack工程中怎样在vue页面中引入第三方非标准的JS库或者方法

前端开发 作者: 2024-08-20 21:50:01
方法一:异步加载第三方库 在我们的vue工程中新建如下路径:src/utils/index.js,在index.js中实现如下方法: export function loadScript(url) {
export function loadScript(url) {
  let isLoaded = false;
  return new Promise((resolve,reject) => {
    if(isLoaded) {
      resolve();
      true;
    }
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.async = ;
    script.src = url;
    script.onerror = reject;
    script.onload =  () {
      isLoaded = ;
      resolve();
    }
    document.head.appendChild(script);
  })
}
 sum(a,b) {
  return a + b;
}
<template>
  div>
    其他组件内容
  </>
>

script>
  import {loadScript} from '@/utils/index.js;
  export default {
    data() {
      return {

      }
    },created() {
      loadScript(./static/lib.js).then(() => {
        console.log(sum(2,3))
      })
    },methods: {

    }
  }
style>
  • vue框架使用:vue-plugin-load-script
  • react框架使用:react-load-script
script type="text/javascript" src="./static/lib.js"></>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65737.html