最近项目中需要引入百度地图api的js文件，刚开始想这还不简单，直接通过script引入，结果发现不行

vue不支持下面的引入方式

<script src="http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209"></script>
<script>
    export default{
     ....
    }
</script>

vue中引入js需要通过import，因此考虑写一个动态加载js的功能，可以结合Promise，js加载成功，调用resolve，js加载失败，调用reject

loadJs，传入要加载的js地址

function loadJs(src) {
  return new Promise((resolve,reject)=>{
    let script = document.createElement('script')
    script.type = "text/javascript"
    script.onload = ()=>{
      resolve()
    }
    script.onerror = ()=>{
      reject()
    }
    script.src= src
    document.getElementsByTagName('body')[0].appendChild(script)
  })
}

export default loadJs

vue组件中调用

<script>
  
  import loadJs from '../../utils/base/loadJs'
  
  export default {
    name : 'Test',
    
    mounted(){
      loadJs('http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209').then(()=>{
        var map = new BMap.Map("allmap");
        ....
      })

    }

  }
</script>

就是这么简单啊~~

如果是引入百度地图api，注意，api地址为

http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209

不要使用默认的api地址，因为这个地址返回的并不是真正的js内容，而是document.write(...)，要使用document.write()中的js地址才可以

http://api.map.baidu.com/api?v=2.0&ak=您的密钥