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

前言

現在項目中主要用的地圖有：百度、高德、天地圖等，在使用的時候需要進行配置。由於現在項目中使用 Vue 的腳手架版本不一致，會使用3或者4的所以配置也不一樣，在這里記錄下。

其實配置的地方是一樣的，都是在 WebPack 中的 externals 選項配置的，只是2、3中 WebPack 配置有變所以不一致。

一、Vue-cli 2中的配置

這個腳手架中 WebPack 的配置文件是在根目錄下的 build 文件夾下，我們一般的路徑是“build\webpack.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 3 中主要因為配置 WebPack 的位置變了，是在根目錄的 vue.config.js 文件中，如下：

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

這個配置了三種地圖。

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