vue单页面引入cdn

Question

vue单页面应用中需要引入百度地图的三个cdn文件来画图
但是网上都说在index.html加，这样的话会有不必要的加载影响速度，
所以想问怎么只在单个组件里引入这三个文件

Answer 1

封装一个工具函数，比如bmap.js，大致代码如下：

export function MP() {  
  return new Promise(function (resolve, reject) {  
    window.onload = function () {  
      resolve(BMap)  
    }  
    let script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ak&callback=init';  
    script.onerror = reject;  
    document.head.appendChild(script);  
  })  
}  

组件中使用：

import { MP } from './bmap.js'
export default {
    mounted() {  
       this.$nextTick(function() {  
          const _this = this;  
          MP().then(BMap => {  
              // 其他操作          
          })
        })
    }
} 

Answer 2

看来你还是没理解单页面的含义,你的担心是没必要的,首页引入并不会重复加载,建议关闭问题