在vue项目里插入mapbox地图

<!-- mapbox -->
<template>
  <div id="map"></div>
</template>
 
<script>
import mapboxgl from 'mapbox-gl'
export default {
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
    this.initmap();
  },
  computed: {},
  methods: {
    initmap() {
        console.log( mapboxgl);

//在官网注册获取token令牌
      mapboxgl.accessToken =
        "pk.eyJ1IjoiMTU1ODY1Mzc2MjMiLCJhIjoiY2t3MWllMGlzNzgwbDJ0bnVlbWRuanhxdyJ9.zkQDNm_ERrrQcfqhF1rbrw";
        
      var map = new mapboxgl.Map({
        container: "map",
//自己绘制的样式地图令牌
        style: "mapbox://styles/15586537623/ckw1r50m3a1s214m31el2r4n9",
        center: [104.07, 30.67],
        zoom: 5,
        // pitch: 60, //视野倾斜，0-60
        // bearing: -17.6,//视野旋转角度
      });
 
    console.log(map);
    }
  }
};
</script>
 
<style lang="scss">
#map {
  height: 500px;
  // border: 1px solid red;
}
</style>

这位博主引入的方式，我这不能正常启动，vue版本的问题吧

vue中展示mapbox地图_李疆的博客-CSDN博客

 这样引入也不对为什么为什么

非得这样引入：import mapboxgl from 'mapbox-gl'