Vue 中使用百度、高德、天地图配置（Vue-cli2、3区分）

前言

现在项目中主要用的地图有：百度、高德、天地图等，在使用的时候需要进行配置。由于现在项目中使用 Vue 的脚手架版本不一致，会使用3或者4的所以配置也不一样，在这里记录下。

其实配置的地方是一样的，都是在 WebPack 中的 externals 选项配置的，只是2、3中 WebPack 配置有变所以不一致。

一、Vue-cli 2中的配置

这个脚手架中 WebPack 的配置文件是在根目录下的 build 文件夹下，我们一般的路径是“buildwebpack.base.conf.js”，在该文件中的配置是：

module.exports = {
  externals: {
    'AMap': 'AMap'
  }    
}

上面是高德地图的，其他地图可以再添加。

另外一个地方要加载 JS API，这个是在项目入口的 HTML 文件，

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

二、Vue-cli 3中的配置

在 Vue-cli 4 中主要因为配置 WebPack 的位置变了，是在根目录的 vue.config.js 文件中，如下：

module.exports = {
  configureWebpack: {
    externals: {
      AMap: 'AMap', // 高德地图配置
      T: 'T', // 天地图
      BMap: 'BMap', // 百度地图配置
    },
  },
}

这个配置了三种地图。

在入口的 HTML 文件中加载 JS API 同上面的。