Vue Baidu used, high Germany, world map configuration (Vue-cli3,4 distinction)

Foreword

The project is now mainly used in the map are: Baidu, High German, world map, etc., when in use need to be configured. Vue due to inconsistencies in the use of scaffolding version of the project now, so the configuration will use 3 or 4 are not the same, here recorded.

In fact, local configuration is the same, are externals option WebPack configuration, but 3 and 4 WebPack configuration has changed so inconsistent.

A, Vue-cli configuration 3

This in WebPack scaffolding configuration file is in the build file in the root directory folder, our general path is "build \ webpack.base.conf.js", in the configuration file is:

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

The above is the high moral map, you can add other maps.

Another place to load the JS API, this project is at the entrance of the HTML file,

<Script src = "https://webapi.amap.com/maps?v=1.4.15&key= key value your application"> </ script>

Second, the 4 arranged Vue-cli

In Vue-cli 4 WebPack arranged mainly because of the location has changed, the file is in the root directory vue.config.js follows:

module.exports = {
  configureWebpack: {
    externals: {
      AMAP: 'AMAP', // high moral map configuration 
      T: 'T', // world map 
      the BMap: 'the BMap', // Baidu map configuration 
    },
  },
}

This configuration of three maps.

JS API is loaded with the above at the entrance of the HTML file.