vue项目遇见报错记录

错误一：检测到重复密钥：“xxx”。这可能会导致更新错误

这个错误是数据上key值重复产生的问题。检查请求数据或者自己写的假数据上，用作key值的值是否存在重复的情况。把重复的值改掉就不报错了。

错误二 dateObject.getTime is not a function

这个错误是弹窗中，输入日期之后，报错。原因是rules中type:'date’造成的，因为初始化成了string类型。改为new Date()。解决办法是把rules中的type:'date’去掉。

错误三 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

这个错误是下拉刷新时出现的，搜出来的解决办法是在下拉的盒子加上一个 touch-action=“pan-y” 的属性，但是加上了仍然不管用，查看了打印，发现只是偶尔下拉到某些数值时，e.camcelable的值是false，所以，在e.preventDefault();之前再加个 e.cancelable 判断即可。

错误四 vue+elementUI 修改联动数据触发表单校验

这个应该是优化问题。
A和B值联动，A触发修改后，需要清空B的值，B值为必填。
原本是这样写的：A触发修改了之后直接B有值的情况下赋值B等于空，此时触发了表单的校验，上面的红字还挺显眼的。
后来调整成 ： B值存在下，删除掉B值，这样就不触发表单的校验啦。

//例子
 this.dialogData.selectId && delete this.dialogData.selectId;

错误五 vue路由中遇到 Error: Avoided redundant navigation to current location:报错显示是路由重复

解决，在router/index.js中加几行代码 传送门

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

插入位置如图：

错误六（记录步骤） 高德地图引入

因为不想引入npm上封装的组件，只想简单引入，所以做此记录
第一步：在index.html中引入高德地图js

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值"></script>

第二步：配置文件vue.config.js配置

mpdule.exports = {
    devServer：{...},//省略的其他配置
    configureWebpack: {
        externals: {
            'AMap': 'AMap' // 高德地图配置
        },
    },
}

第三步：vue文件中import AMap

import AMap from "AMap";
...
methods:{
    initMap(){
        var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
    }
}