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();
      return true;
    }
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.async = true;
    script.src = url;
    script.onerror = reject;
    script.onload = function () {
      isLoaded = true;
      resolve();
    }
    document.head.appendChild(script);
  })
}

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

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

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

<template>
  <div>
    其他组件内容
  </div>
</template>

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

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

    }
  }
</script>

<style>
</style>

当然也可以使用插件来实现。

• vue框架使用：vue-plugin-load-script
• react框架使用：react-load-script

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

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

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