Uncaught (in proimse) 报错怎么解决

下面是一篇踩坑文章
报错描述：点击登录按钮，账号密码正确的情况下，能够成功登录，但是控制台一直报红。

报错如图

解决办法

解决思路：
1.审查代码：首先审查login.vue这个文件的代码有没有写错，通篇看下来代码比较正常，方法都是对的。
2.查百度：百度我查到的是要捕获异常，但是后台接口里面并没有返回error。
3.一步一步查细节：整体代码看不出来什么逻辑异常问题，查细节比如验证规则，还有username写成name，最后发现的问题来源是本应该写的validateField写成了validate，以为用validate验证一个字段也没错，结果是validate只能验证表单，单独字段要用validateField。

-----------------------真的是万万没有加想到----------------------

  handleNameChange(val) {
      this.loginForm.username = val;
      this.$refs.loginForm.validateField("username");//此处写成了validate,
    },
    handlePwdChange(val) {
      this.loginForm.password = val;
      this.$refs.loginForm.validateField("password");
    },

回顾element的input验证方法

贴上源代码

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-icon">
        <Icon
          customStyle="width: 100%; height: 100%"
          link="icon-login-pic"
          :pointer="false"
        ></Icon>
      </div>
      <div class="login-form">
        <div class="login-content">
          <h2>{{ $t("lang.wmsTitle") }}</h2>
          <el-form ref="loginForm" :model="loginForm" :rules="rulesForm">
            <el-form-item label="" prop="username">
              <Input
                tabindex="1"
                icon="icon-zhanghao"
                iconActive="icon-zhanghao-copy"
                :value="loginForm.username"
                :placeholder="$t('lang.enterName')"
                @change="handleNameChange"
                autocomplete="off"
              ></Input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <Input
                tabindex="2"
                icon="icon-mima"
                iconActive="icon-mima-copy"
                :value="loginForm.password"
                type="password"
                :placeholder="$t('lang.enterPwd')"
                @change="handlePwdChange"
                autocomplete="off"
              ></Input>
            </el-form-item>
          </el-form>
          <el-button
            class="login-btn"
            type="primary"
            :disabled="loginDisable"
            :loading="logining"
            @click="judgeLogin('loginForm')"
            @keyup.enter="judgeLogin('loginForm')"
          >
            {{ $t("lang.login") }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    const loginForm = {
      username: "",
      password: "",
      code: "",
      uuid: ""
    };
    const rulesForm = {
      username: [
        { required: true, message: this.$t("lang.enterName"), trigger: "blur" }
      ],
      password: [
        { required: true, message: this.$t("lang.enterPwd"), trigger: "blur" }
      ]
    };
  
    return {
      loginForm,
      rulesForm,
      imgSrc: "/captcha",
      logining: false,
      // codeUrl: ''
     
    };
  },
  computed: {
    loginDisable() {
      return !(this.loginForm.username && this.loginForm.password);
    }
  },
  created() {
    document.addEventListener("keypress", this.handleKeyLogin);
  },
  mounted() {
    // this.$refs.loginForm.clearValidate()
  },
  beforeDestroy() {
    document.removeEventListener("keypress", this.handleKeyLogin);
  },
  methods: {
    // getCode () {
    //   this.$api.account.getCodeImg().then(res => {
    //     // this.codeUrl = "data:image/gif;base64," + res.data.img;
    //     this.loginForm.uuid = res.data.uuid;
    //   });
    // },
    handleNameChange(val) {
      this.loginForm.username = val;
      this.$refs.loginForm.validateField("username");
    },
    handlePwdChange(val) {
      this.loginForm.password = val;
      this.$refs.loginForm.validateField("password");
    },
    handleKeyLogin(event) {
      var keycode = event.key;
      if (keycode === "Enter") {
        this.judgeLogin("loginForm"); // 登录方法名
        return false;
      }
    },
    judgeLogin(formName) {
      if (this.logining) return;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loginHandle();
        } else {
          this.doAlert("Error submit! Please check the input.", "Warn");
          return false;
        }
      });
    },
    loginHandle() {
      this.logining = true;
      this.$store
        .dispatch("Login", this.loginForm)
        .then(({ code, msg }) => {
          if (code !== 0) {
            this.$message({
              message: msg,
              type: "error"
            });
          } else {
            this.$message({
              message: msg,
              type: "success"
            });
          }
          this.logining = false;
          this.$router.push({ path: this.redirect || "/warehouseList" });
        })
        .catch(
          () => {
          this.logining = false;
        }
        );
    },
    doAlert(content, title) {
      this.$alert(content, title, {
        confirmButtonText: "confirm"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  min-width: 900px;
  min-height: 380px;
  height: 100%;
  width: 100%;
  background: #2b465b;
  justify-content: center;
  align-items: center;
  .login-box {
    display: flex;
    width: 60%;
    height: 60%;
    min-width: 900px;
    min-height: 380px;
    justify-content: center;
    align-items: center;
  }
  .login-icon {
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    background: #459aa4;
    .svg-div {
      width: 76%;
      height: 100%;
    }
  }
  .login-form {
    display: flex;
    width: 50%;
    height: 100%;
    background: white;
    justify-content: center;
    align-items: center;
    .login-content {
      width: 60%;
    }
    h2 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 48px;
      width: 100%;
      text-align: center;
    }
    ::v-deep .el-input .el-input__inner {
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      padding-left: 32px;
    }
    ::v-deep .el-form-item {
      margin-bottom: 30px;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>

总结

所以写代码在细节的地方真的要非常的注重！并且一个问题超过了一个小时还想不出来的话，我建议赶紧问有经验的同事，这个是真的，别人半个小时就能够给你解决。
在团队中，某一个人没有跟上来其实也会导致项目的交付，千万不要因为自己的没有经验或者不会解决这类问题而不敢问，拖慢了整个团队项目进度的后腿，这是禁忌！