vue cli4 + AMap

更新到了vue cli4，然后项目就报错：
error 'AMap' is not defined no-undef

经过一番折腾，终于成功运行，记录一下步骤方便后面查阅

1、public/index.html中引入

<script src="https://cache.amap.com/lbs/static/es5.min.js"></script><!--（中、英文地图）-->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你自己的key&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>

2、vue.config.js中配置

configureWebpack: {
    externals: {
      'AMap': 'AMap' 
    }
  }

3、vue文件中
注意点：
1）记得引入AMap
import AMap from 'AMap'
2）在mounted中调用
mounted(){
this.drawGaodeMap();
}

<template>
    <div id="gaodeMap"></div>
</template>
<script>
import AMap from 'AMap'
export default {
    data(){
        return{
            amap:{}
    }
    },
    mounted(){
        this.drawGaodeMap();
    },
   methods:{
       drawGaodeMap(){
            this.amap = new AMap.Map('gaodeMap', {
                resizeEnable: true,
                zoom:3,//级别
                lang: "en" //可选值：en，zh_en, zh_cn
                // center: [116.397428, 39.90923],//中心点坐标
                //viewMode:'3D'//使用3D视图
            });
            var scale = new AMap.Scale(),
                toolBar = new AMap.ToolBar(),
                overView = new AMap.OverView();
            this.amap.addControl(scale);
            this.amap.addControl(toolBar);
            this.amap.addControl(overView);
        }
   }
}
</script>
<style>
#gaodeMap{
        width:100%; height: 500px;
 } 
</style>

大功告成