在vue2.X项目中，如果是是需要使用第三方的软件库，如果我们在npm 中没找到对应的软件安装包，如果我们想要使用可以通过如下两个方法
方法一：
直接找到public文件夹下的index.html
在头部直接通过 script 标签引入使用，如下所示
<head>
.....
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 增加bigemap相关的库 -->
<link rel='stylesheet' href='<%- VUE_APP_BIGEMAP_URL %>/bigemap.js/v2.1.0/bigemap.css' />
<script defer src='<%- VUE_APP_BIGEMAP_URL %>/bigemap.js/v2.1.0/bigemap.js'></script>
</head>
方法二：
通过document.createElement('script') 动态添加，但是这样有一个问题，在我们使用这个库初始化的时候，这个库可能没有初始化完成，因此可能会报错（大概率报错），因此我们要在软件库加载成功后在初始化使用
import Vue from 'vue'
const BigemapURL = process.env.VUE_APP_BIGEMAP_URL;
const MapLoader = () => {
return new Promise((resolve, reject) => {
if (window.BM) {
resolve(window.BM)
} else {
// 创建bigemap CSS
var head = document.getElementsByTagName('head')[0];
var cssURL = `${BigemapURL}/bigemap.js/v2.1.0/bigemap.css`;
var linkTag = document.createElement('link');
linkTag.id = 'dynamic-style';
linkTag.href = cssURL;
linkTag.setAttribute('rel', 'stylesheet');
// linkTag.setAttribute('media', 'all');
linkTag.setAttribute('type', 'text/css');
head.appendChild(linkTag);
// 获取JS库加载完成
// eslint-disable-next-line no-inner-declarations
function loadScript(url) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = 'async';
script.src = url;
document.body.appendChild(script);
if (script.readyState) {
// IE
script.onreadystatechange = () => {
if (script.readyState === 'complete' || script.readyState === 'loaded') {
script.onreadystatechange = null;
resolve(window.BM)
}
}
} else {
// 非IE
script.onload = () => {
resolve(window.BM)
}
}
}
loadScript(`${BigemapURL}/bigemap.js/v2.1.0/bigemap.js`)
}
})
}
Vue.prototype.$MapLoader = MapLoader
这时候在使用的vue组件中直接
this.$MapLoader ().them(BM=>{
// 初始化 对应的软件库 功能
})
