农场地图展示完善

Administrator

2022-05-11 bcb0b5f05984af58e329404ec8e7b3862878515f

农场地图展示完善

 src/components/map/main.vue

@@ -70,12 +70,6 @@
        source: new VectorSource()
      }),

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      typeSelected: "LineString",
      drawLayer: null,
      draw: null,
@@ -92,7 +86,6 @@
        w: 200,
        h: 10
      },
      // openDrawChiose: "", //openDrawPoint openDrawLine
      openDrawLine: false,
      openDrawPoint: false,

@@ -302,22 +295,10 @@
        this.map.addInteraction(this.draw);
      }

      // 选点
      // this.addIconMarker([115.9111272006128, 28.699307185841562]);
    },
    addIconMarker(intlat) {
      let that = this;
      that.carAddlayer.getSource().clear();
      // if (this.olLayer) {
      //   window.ol2d.removeLayer(this.olLayer);
      // }
      // let iconFeatures;

      // this.olLayer = new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // });
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat) //绘制图形（点）
      });
@@ -346,41 +327,7 @@
      );

      // 加载多个点用addFeatures，一个点用addFeature
      // this.olLayer.getSource().addFeature(iconFeature);
      that.carAddlayer.getSource().addFeature(iconFeature);
      // window.ol2d.addLayer(this.olLayer);

      // var startMarker = new OlFeature({
      //   type: "icon",
      //   // geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875]),
      //   geometry: new OlGeomPoint(intlat),
      // });

      // var vectorLayer = new OlLayerVector({
      //   source: new OlSourceVector({
      //     features: [startMarker],
      //   }),
      //   style: new OlStyleStyle({
      //     image: new OlStyleIcon({
      //       anchor: [0.5, 1],
      //       src: "img/logos.png",
      //       // src: http://192.168.4.61:9527/static/mapMoniter/0.png
      //       // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
      //       // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
      //     }),
      //     // 设置图片下面显示字体的样式和内容
      //     text: new Text({
      //       text: "文字描述", // 添加文字描述
      //       font: "14px font-size", // 设置字体大小
      //       // fill: new Fill({
      //       //   // 设置字体颜色
      //       //   color: "#1CAF9A",
      //       // }),
      //       offsetY: 10, // 设置文字偏移量
      //     }),
      //   }),
      // });
      // window.ol2d.addLayer(vectorLayer);

      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
@@ -408,29 +355,12 @@
      });

      const iconStyle = new Style({
        // text: new Text({ // 字体, 未成功, 浪费许多时间
        //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
        //   text: "\e645",
        //   fill: new Fill({ color: "green" }),
        // }),

        image: new Icon({
          scale: scale,
          opacity: 1,
          src: icon
          // src: require('../../assets/Mark.png')
        })

        // new CircleStyle({ // 普通样式
        //   radius: 6,
        //   fill: new Fill({
        //     color: 'rgba(200, 155, 155, 0.8)'
        //   }),
        //   stroke: new Stroke({
        //     color: 'black',
        //     width: 0.3,
        //   })
        // }),
      });

      iconFeature.setStyle(iconStyle);
@@ -454,7 +384,6 @@
            var entityArr = [];
            entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);

            // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
            if (entityData && entityData != "") {
              entityData = entityData[1].split(",");

@@ -476,7 +405,6 @@
            view.setZoom(14.5);

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
              geometry: new LineString(lineCoords)
            });
@@ -506,10 +434,6 @@
    },
    addNewLine() {
      this.map = ol2d;
      // console.log(ol2d, 1);
      // console.log(drawFence, 2);
      // var d = new drawFence(ol2d);
      // console.log(d);

      // 添加一个绘制的线使用的layer
      this.drawLayer = new VectorLayer({
@@ -546,11 +470,6 @@
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
          // console.log(e.clientX);
          // console.log(e.offsetX);
          // console.log(e.pageX);
          // console.log(e.screenX);
          // console.log("================================");
        });

      this.coordinates = [];
@@ -587,17 +506,6 @@
      }
    },
    doData(val) {
      //      ` routeInfo: "
      //      LINESTRING(
      //        115.875489096939 28.7179278611352
      //        ,115.8794051221 28.7176267680684
      //        ,115.879340749084 28.7143052776491
      //        ,115.878879409134 28.7140324026424
      //        ,115.875220876038 28.7150580325974
      //        ,115.875489096939 28.7179466794231
      //        ,115.875489096939 28.7179466794231
      //        )"
      // `
      let str = "LINESTRING(";
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
@@ -610,15 +518,6 @@
    },
    addLinesDraw(val) {
      var that = this;
      // if (ringId != null && ringId != "") {
      //   $.ajax({
      //     url: "api/routeIn/routein/selectList",
      //     type: "post",
      //     data: {
      //       id: ringId,
      //     },
      //     dataType: "JSON",
      //     success: function (data) {
      that.peopleLineAddlayer.getSource().clear();
      var entityData = "";
      var entityArr = [];
@@ -686,34 +585,5 @@
<style scoped lang="scss">
#map {
  position: relative;
  // .controlMap {
  //   position: absolute;
  //   top: 10px;
  //   left: calc(50% - 97px);
  //   z-index: 2 !important;
  //   #openDrawLine,
  //   #openDrawPoiton {
  //     width: 174px;
  //     position: absolute;
  //     // top: 43px;
  //     top: 10px;
  //     // left: calc(50% - 96px);
  //     left: 50%;
  //   }
  //   .openDrawsb {
  //     background-color: #fff;
  //     color: black;
  //   }
  //   .activeDraw {
  //     background-color: #409eff;
  //     color: #fff;
  //   }
  // }
  // #dataConfirm {
  //   position: absolute;
  //   top: 20px;
  //   left: calc(50% + 82px);
  //   z-index: 3 !important;
  // }
}
</style>

 src/components/map/mainInThere.vue

@@ -22,25 +22,6 @@
  // eslint-disable-next-line no-unused-vars
  defaults as OlControlDefaults,
  defaults,
  // 全屏控件
  FullScreen,
  // 比例尺控件
  ScaleLine,
  // 缩放滚动条控件
  // eslint-disable-next-line no-unused-vars
  ZoomSlider,
  // 鼠标位置控件
  // eslint-disable-next-line no-unused-vars
  MousePosition,
  // -地图属性控件
  Attribution,
  // 鹰眼控件
  // eslint-disable-next-line no-unused-vars
  OverviewMap,
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
@@ -81,11 +62,6 @@
        zIndex: 22,
        source: new VectorSource()
      }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
@@ -97,14 +73,6 @@
        source: new VectorSource()
      }),
      peopleLineAddlayer: null,

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      // typeSelected: "LineString",
      typeSelected: "Polygon",
      // drawLayer: null,
      draw: null,
@@ -150,12 +118,6 @@
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
@@ -249,7 +211,6 @@
      });
      ol2d.addInteraction(this.draw);
      this.draw.on("drawend", function(evt) {
        // console.log(evt, 3);
        that.drawingEnd(evt);
      });
    },
@@ -265,7 +226,7 @@
        points[0].map(item => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        // console.log(that.polygon, 1111);
        
        that.$store.commit("setpolygon", that.polygon); //用vuex传最终数据
        //重新画面
        that.addLines(that.polygon, "mian");
@@ -282,7 +243,6 @@
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      console.log(ourDatas);
    },
    //old
    //加载底层路线和图标
@@ -307,8 +267,6 @@
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
@@ -363,15 +321,12 @@
      var entityArr = [];
      if (notdo) {
        entityArr = data;
        console.log(entityArr, "notdo");
      } else {
        for (let kd in data) {
          entityArr.push([Number(data[kd].lng), Number(data[kd].lat)]);
        }
      }
      // console.log(entityArr);
      var lineCoords = entityArr; // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords)
@@ -395,8 +350,6 @@
      //面
      //解析面数据
      let mianData = [lineCoords];
      // console.log(mianData);
      // return;
      var feature_Polygon = new Feature({
        //面面板
        geometry: new Polygon(mianData)
@@ -418,7 +371,6 @@
      this.layermian.getSource().addFeature(feature_Polygon);
      //保存图层
      ol2d.addLayer(this.layermian);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················
@@ -433,10 +385,8 @@
      }
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
@@ -468,7 +418,6 @@
    //确认数据
    useMapData() {
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawChiose == "openDrawLine") {
@@ -587,13 +536,6 @@
      }

      var lineCoords = entityArr; // 线里点的集合
      //移动位置---暂不需要
      // var view = ol2d.getView();
      // view.setCenter([
      //   lineCoords[Math.ceil(entityArr.length / 2)][0],
      //   lineCoords[Math.ceil(entityArr.length / 2)][1],
      // ]);
      // view.setZoom(14.5);

      // 要素
      var feature_LineString = new Feature({

 src/views/farm/farm.vue

@@ -11,7 +11,7 @@
            @submit="submitBase"
          >
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="position">
            <template slot-scope="{}" slot="position">
              <getMapDataInThere
                ref="getMapData"
                id="getMapData"
@@ -173,33 +173,28 @@
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      getDetails(this.userInfo.user_id).then((res) => {
        if (res.data.code == 200) {
          that.objBase = res.data.data;
          let usePolygons = that.objBase.position
            .split("POLYGON((")[1]
            .split("))")[0]
            .split(",");
          for (let k in usePolygons) {
            usePolygons[k] = {
              lng: +usePolygons[k].split(" ")[0],
              lat: +usePolygons[k].split(" ")[1],
            };
          }
          this.$refs.getMapData.draw(usePolygons);
        }
      });
    });
  },
  methods: {
    initData() {
      //用vuex传最终数据，加载地图
      //   this.$store.commit("setpolygon", []);
      this.getDetail();
    },
    //获取农场基本信息
    getDetail(){
        var that = this;
        getDetails(this.userInfo.user_id).then((res)=>{
            if(res.data.code==200){
                that.objBase = res.data.data;
                let usePolygons = that.objBase.position
                    .split("POLYGON((")[1]
                    .split("))")[0]
                    .split(",");
                for (let k in usePolygons) {
                    usePolygons[k] = {
                    lng: +usePolygons[k].split(" ")[0],
                    lat: +usePolygons[k].split(" ")[1]
                    };
                }
                console.log(usePolygons);
                this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
            }
        })
    },
    //农场基本信息提交
    submitBase(form, loading, done) {
      if (this.polygons.length == 0) {
@@ -219,7 +214,6 @@
        }
        //设置坐标点
        form.position = usePolygons;
        console.log(form, 121222112212121);
      }
      // 修改
      update(form).then((res) => {
@@ -243,11 +237,6 @@
      this.LineData = val[0];
      this.PointData = val[1];
    },
  },
  mounted() {},
  created() {
    //初始化信息
    this.initData();
  },
  watch: {},
};

 src/views/farm/getMapDataInThere.vue

@@ -2,7 +2,7 @@
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color:red">*</div>
      <div style="color: red">*</div>
      未绘画区域
    </div>
    <div class="controlMapWindowTitle">
@@ -15,77 +15,6 @@
        >
      </el-button-group>
    </div>
    <!-- <div class="controlMapWindow">
      <div class="controlMapWindowTitle">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-finished"
            @click="openDrawLineMethod"
            :disabled="fromView"
            >新增路线</el-button
          >
          <el-button
            type="primary"
            @click="openDrawPointMethod"
            icon="el-icon-coordinate"
            :disabled="fromView"
            >新增标点</el-button
          >
        </el-button-group>
      </div>
      <div class="controlMapWindowmain">
        <transition-group
          :name="animateName"
          :enter-active-class="animateEnter"
          :leave-active-class="animateLeave"
        >
          <div
            class="getMapData__once"
            v-for="(item, index) in ourDatas"
            :key="index"
          >
            <div class="getMapData_once_label">
              <el-tag> {{ item.label }}</el-tag>
            </div>
            <el-input
              :class="[
                'getMapData_once_name',
                item.notPath == 2 ? 'notPath' : '',
              ]"
              @blur="myRules(index)"
              v-model="item.name"
              placeholder="请输入路径名称"
              :disabled="fromView"
            ></el-input>
            <transition
              :name="animateNames"
              :enter-active-class="animateEnters"
              :leave-active-class="animateLeaves"
            >
              <div class="notPathTitile" v-show="item.notPath == 2">
                请输入名称或选择路径
              </div>
            </transition>
            <el-button
              class="getMapData_once_get"
              :type="item.value ? 'success' : 'primary'"
              :title="item.value ? '重新选择' : '点击选择'"
              :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
              @click="openMap(item.label, index, item.value)"
              :disabled="MapDataShow || fromView"
            ></el-button>
            <el-button
              class="getMapData_once_endBut"
              icon="el-icon-delete"
              circle
              @click="deleteRowOurs(index)"
              :disabled="MapDataShow || fromView"
            ></el-button>
          </div>
        </transition-group>
      </div>
    </div> -->
  </div>
</template>

@@ -95,47 +24,29 @@
export default {
  name: "getMapData",
  components: {
    MapInThere
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygons"])
    ...mapGetters(["rotesData", "pointData", "polygons"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        // console.log("深度监听：", val);
        this.checkDom("getMapDataRefs", dom => {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true
      deep: true,
    },
    polygons() {
      console.log(this.polygons);
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    }
    },
  },
  data() {
    return {
      Refresh: false,
      // routers: [
      //   {
      //     label: "路径1",
      //     value: "",
      //     routerName: "",
      //     notPath: true,
      //   },
      // ],
      // potions: [
      //   {
      //     label: "标点1",
      //     value: "",
      //     potionName: "",
      //     notPath: true,
      //   },
      // ],
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
@@ -147,68 +58,30 @@
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [
        // {
        //   label: "路径2",
        //   value:
        //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
        //   name: "xxx2",
        //   notPath: false,
        //   isLine: true,
        //   id: 2,
        // },
        // {
        //   label: "路径3",
        //   value:
        //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
        //   name: "xxx3",
        //   notPath: false,
        //   isLine: true,
        //   id: 3,
        // },
        // {
        //   label: "标点4",
        //   value: [114.03887343706977, 27.63000553765213],
        //   name: "喜迎校庆选点1",
        //   notPath: false,
        //   isLine: false,
        //   id: 4,
        // },
      ],
      ourDatas: [],
      nowId: 0,
      isCheck: false
      isCheck: false,
    };
  },
  mounted() {
    // this.$emit("setMapData", [this.routers, this.potions]);
    // let that = this;
    // if (that.ourDatas.length != 0) {
    //   for (let k in that.ourDatas) {
    //     that.ourDatas[k].id = +k + 1;
    //   }
    // }
    // this.checkDom("getMapDataRefs", dom => {
    //   dom.addLines(that.polygons);
    // });
    // this.nowId = +this.ourDatas.length + 1;
    if (this.polygons.length > 0) {
      this.doThat(this.polygons);
    }
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", dom => {
        dom.addLines(val);
        // 移动位置
        dom.move(val);
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
          // 移动位置
          dom.move(val);
      });
    },
    drawFace() {
      // console.log(this.$refs.getMapDataRefs);
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      // console.log(234);
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
@@ -219,7 +92,7 @@
        name: "",
        notPath: false,
        isLine: true,
        id: +id
        id: +id,
      });
    },
    openDrawPointMethod() {
@@ -230,7 +103,7 @@
        name: "",
        notPath: false,
        isLine: false,
        id: +id
        id: +id,
      });
    },
    deleteRowOurs(index) {
@@ -282,7 +155,7 @@
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
@@ -293,7 +166,7 @@
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
@@ -321,7 +194,6 @@
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      // console.log(line, point);
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
@@ -331,9 +203,7 @@
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        // console.log(errorId, "errorId");
        for (let x in this.ourDatas) {
          // console.log(this.ourDatas[x], "x");
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
@@ -348,7 +218,6 @@
        }
        return false;
      } else {
        // console.log("通过");
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
@@ -361,7 +230,6 @@
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      // console.log(item, names, 7777);
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
@@ -371,7 +239,6 @@
            kin != "isLine" &&
            kin != "id"
          ) {
            // console.log(kin);
            notData.push(inItem.id);
            break;
          }
@@ -418,8 +285,8 @@
      }
      //  首次执行
      checkDom();
    }
  }
    },
  },
};
</script>

@@ -438,71 +305,6 @@
    left: calc(50% - 42px);
    top: 0;
  }
  // .controlMapWindow {
  //   width: 320px;
  //   height: calc(100% - 20px);
  //   // border: 1px solid red;
  //   // box-shadow: 2px 0 15px 2px #acacac;
  //   position: absolute;
  //   left: 10px;
  //   top: 10px;
  //   background-color: #fff;
  //   border-radius: 0 15px 15px 0;
  //   padding: 10px 10px;
  //   overflow: hidden;
  //   // .controlMapWindowTitle {
  //   //   height: 40px;
  //   //   width: 100%;
  //   //   margin-bottom: 5px;
  //   //   @extend .flexCenter;
  //   // }
  //   .controlMapWindowmain {
  //     width: 100%;
  //     height: calc(100% - 45px);
  //     overflow-x: hidden;
  //     overflow-y: scroll;
  //     .getMapData_left {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData_right {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData__once {
  //       width: 100%;
  //       height: 40px;
  //       margin-bottom: 10px;
  //       position: relative;
  //       @extend .flexCenter;
  //       flex-direction: row;
  //       .getMapData_once_label {
  //         padding-left: 15px;
  //         width: 90px;
  //         height: 100%;
  //         @extend .flexCenter;
  //         justify-content: space-around;
  //       }
  //       .getMapData_once_name {
  //         width: calc(100% - 130px);
  //       }
  //       .getMapData_once_get {
  //         padding: 6px 16px;
  //         font-size: 20px;
  //       }
  //       .notPathTitile {
  //         position: absolute;
  //         left: 90px;
  //         bottom: -20px;
  //         color: red;
  //         font-size: 1px;
  //       }
  //     }
  //   }
  // }
  // 验证
  .notPath {
    // border-bottom: 0.5px solid red;
  }

 vue.config.js

@@ -1,39 +1,39 @@
module.exports = {
  //路径前缀
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
  css: {
    extract: { ignoreOrder: true }
  },
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 1888,
    proxy: {
      '/api': {
        //本地服务接口地址
        target: 'http://localhost',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        ws: true,
        pathRewrite: {
          '^/api': '/'
    //路径前缀
    publicPath: "/",
    lintOnSave: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        //忽略的打包文件
        config.externals({
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
        });
        const entry = config.entry('app');
        entry.add('babel-polyfill').end();
        entry.add('classlist-polyfill').end();
        entry.add('@/mock').end();
    },
    css: {
        extract: { ignoreOrder: true }
    },
    //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
    devServer: {
        port: 1888,
        proxy: {
            '/api': {
                //本地服务接口地址
                target: 'http://localhost:89',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',
                ws: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
      }
    }
  }
};
};