对于vue中使用高德地图，目前比较常用的是使用饿了么的 vue-amap ，但是有时我们需要单独某个页面使用高德原生API来方便开发，这时我们可以借用webpack的webpack-require-http插件来异步载入高德api。

一、安装 webpack-require-http 插件并配置vue项目。

# 安装webpack-require-http 插件
npm install webpack-require-http --save-dev

配置vue.conf.js，支持 webpack-require-http 插件 。

chainWebpack (config) {
  // webpack-require-http 按需加载http资源
  config.externals([
    require('webpack-require-http').custom({
	  rules: {
	    // 高德地图自动附加key信息
	    'amap\\.com(.*)': 'amap.com$1&key=' + process.env.AMAP_KEY
	  }
    })
  ])
  .end()
}

二、在具体vue页面加载高德api。

mounted () {
  // 只引入高德地图
  require('https://webapi.amap.com/maps?v=1.4.15').then(() => {
   let AMap = window.AMap
   let map = new AMap.Map('map')
  })
  // 除了高德地图，该插件还可以对多个资源进行操作
  Promise.all([
    require('https://xxx.com/test.js'),
    require('https://xxx.com/test123.js')
  ]).then(function() {
    
  });
}