前提说明
Vue CLI 3 创建项目，目录大致如下所示：
1 ... 2 ├── [ 512] public 3 │ ├── [2.2K] favicon.ico 4 │ └── [ 812] index.html 5 ├── [ 512] src 6 │ ├── [ 709] App.vue 7 │ ├── [ 512] assets 8 │ ├── [ 512] components 9 │ ├── [ 277] main.js 10 │ ├── [1.2K] router.js 11 │ └── [ 512] views 12 ...
在项目根目录手动创建vue.config.js webpack配置文件,现在目录如下所示：
1 ... 2 ├── [ 512] public 3 │ ├── [2.2K] favicon.ico 4 │ └── [ 812] index.html 5 ├── [ 512] src 6 │ ├── [ 709] App.vue 7 │ ├── [ 512] assets 8 │ ├── [ 512] components 9 │ ├── [ 277] main.js 10 │ ├── [1.2K] router.js 11 │ └── [ 512] views 12 ├── [1.6k] vue.config.js 13 ...
vue.config.js内容大致如下：
1 module.exports = { 2 configureWebpack: { 3 4 } 5 } 6 // OR 7 module.exports = { 8 configureWebpack: config => { 9 10 } 11 }
具体操作
在文件@/public/index.html[1]中引入百度javascript文件，如下：
1 <head> 2 <!-- ... --> 3 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script> 4 </head>
修改vue.config.js内容，如下：
1 module.exports = { 2 configureWebpack: { 3 externals: { 4 "BMap": "BMap" 5 } 6 } 7 } 8 // OR 9 module.exports = { 10 configureWebpack: config => { 11 config.externals = { 12 "BMap": "BMap" 13 } 14 } 15 }
完成以上操作后，就可以在需要的地方引入BMap模块了，示例如下：
1 <template> 2 <div id="map" class="map"></div> 3 </template> 4 5 6 7 <script> 8 9 import BMap from 'BMap' 10 11 export default { 12 methods: { 13 initMap(){ 14 // 百度地图API功能 15 var map = new BMap.Map("map"); 16 let point = new BMap.Point(118.750801, 31.944156); 17 18 map.centerAndZoom(point, 15); 19 map.enableScrollWheelZoom(true); 20 var marker = new BMap.Marker(point); // 创建标注 21 map.addOverlay(marker); 22 } 23 24 }, 25 mounted(){ 26 this.initMap(); 27 } 28 } 29 </script> 30 31 <style lang="scss" scoped> 32 // ... 33 </style>