先放成功图：

第一步：当然引入离线地图需要资源包，三个js文件，地址是：（https://download.csdn.net/download/qq_27036043/11751597（样式文件比如地图的css和一些图标不重要，就不上传了）。这三个文件如下，这三个文件需要放入static文件夹下。在vue的index.html中分别引入

要按照这个顺序依次引入。
第二步：如果我们将地图的tiles文件（即百度地图的离线瓦片）放入到vue中的static文件夹中的话，数量小还可以，万一数量很多，很容易在vue 运行npm run dev时造成栈溢出。所以我们要讲tiles这个文件夹放入到nginx中。在nginx.conf中进行配置
具体代码如下

 server{
        listen 9090;
        server_name resource;
         root D:/baidumap/mapapi/tiles/; #放入你百度离线的路径
        autoindex on;
        location / {
            # 跨域问题
           add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
          add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }
           add_header Cache-Control "no-cache,must-revalidate"; //解决缓存问题
    }

下面这一步很重要，就是如何把请求瓦片的路径替换成nginx中的路径。
我们打开BaiduApi_2.0.js这个文件夹。在全文搜索tdir这个关键字。会找到这行代码

tdir = `http://localhost:9090/${b}/${d}/${a}${MAPCONFIG.APIOVERLATYIMAGETYPE}`
 return tdir;

这是我已经配置好的。大家可以根据路径的不同，改写地址就好了。这里我仅仅配置了平面的，没有配置卫星的瓦片路径，如果项配置也是在这个BaiduApi_2.0.js文件夹中全文搜索“卫星”，找到就可以配置了。

最后：就是在map.vue 中使用百度地图了。代码如下。我这里的瓦片是泰州的，所以中心坐标是泰州这里的。大家要想显示其它城市的，必须要换成其它城市的瓦片和中心坐标。中心坐标是下面代码的这一行。
map.centerAndZoom(new BMap.Point(119.939262, 32.488703), 14); //

<template>
  <div id="MapBox">
    <div class="baiduMap" id="mapShow"></div>
  </div>
</template>

<script>
export default {
  name: "baiduMap",
  data() {
    return {
      map: "",
      overView: "",
      marker: ""
    };
  },
  mounted() {
    this.baiduMap();
  },
  methods: {
    baiduMap(){
       var map = new BMap.Map("mapShow", { minZoom: 1, maxZoom: 17});     // 创建Map实例
    map.centerAndZoom(new BMap.Point(119.939262, 32.488703), 14);  // 初始化地图,设置中心点坐标和地图级别
    //map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));    //添加地图类型控件
	//添加缩放按钮
	map.addControl(new BMap.NavigationControl({
	    anchor: BMAP_ANCHOR_TOP_LEFT,  //显示左边还是右边
	    type: BMAP_NAVIGATION_CONTROL_LARGE //展示的风格
	}));
	//添加比例尺
	map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }));
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	//显示鹰眼
	var overViewOpen = new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
	map.addControl(overViewOpen);
    }
  }
};
</script>

<style  scoped>
.MapBox {
  position: relative;
  top: 70px;
}
.baiduMap {
  height: 600px;
  width: 1300px;
}
/* 去除地图上，左下字体标注 */
.anchorBL {
  display: none;
}
</style>

最后再粘贴出目录结构。

希望这篇文章对大家开发有所帮助。谢谢。大家有问题可以一起讨论?