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

方法一：异步加载第三方库

在我们的vue工程中新建如下路径：src/utils/index.js，在index.js中实现如下方法：

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);
  })
}

 我们在static下面创建一个lib.js文件存放普通的方法：

 sum(a,b) {
  return a + b;
}

那么我们在某一个vue页面引入这个loadScript，在lib.js加载完成后再执行后续的操作，如下vue页面代码：

<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

方式二：index.html静态模板script标签引入

script type="text/javascript" src="./static/lib.js"></>

 然后在其他vue页面就可以全局调用lib中的方法了。