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