vue按需异步加载原生高德地图
对于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() { }); }