Vue/cli 3.0中使用百度地图api

1. 申请百度地图ak

ak会在引入百度js的时候用到，你可以点击这里申请一个唯一ak

---

2. 引入百度地图js

在public/index.html里面添加下面代码，注意把“你的ak”替换成你申请的ak

    
复制代码

---

3. 配置webpack

由于cli3隐藏了webpack配置文件，所以我们需要在根目录创建一个vue.config.js文件，并写入下面代码

module.exports = {
  configureWebpack: {
    externals: {
      "BMap": "BMap"
    }
  }
}
复制代码

vue会读取该文件，并合并到webpack配置文件上面，如果你想了解更多关于cli3和webpack，你可以点击这里

---

4. 单组件文件引入

如果你是打算在单文件组件内使用（后缀为.vue文件），你可以参考下面代码

复制代码

需要注意的是：

1. 如果你在mounted生命周期之前进行操作，会报错。
2. 你需要给容器设置一个高度，不然默认为0
3. 如果你使用eslint作为代码风格检查，就需要如上面代码那样忽略检查

---

结尾：以上只是简单的时候，如有更复制的需求，请前往这里寻找答案

转载于:https://juejin.im/post/5bc1515fe51d450e5e0cbf87