vue报错集锦

1.跳转路由时报：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/businessHandle".

       百度翻译此错误是（Uncaught（in promise）NavigationDuplicated：避免了到当前位置的冗余导航：“/businessHandle”。），我心想，我跳转的路由和当前这个路由地址不一样啊，怎么会存在冗余重复的导航呢？仔细一看自己的代码，真想像罗老师一样扇自己脸，this.$router.push({path:val})让我写成了this.$router.push({pate:val})。一字母之差耽误半天事。。。

2.vue引入echarts报："export 'default' (imported as 'echarts') was not found in 'echarts'错误的解决方案。

        百度了许久，还是在某篇文章的评论区找到的答案，就是把在main.js中全局引入的：import echarts from 'echarts'换成import * as echarts from 'echarts';就可以了。。。

3.打包后访问页面空白解决：打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。否则出现不了页面，出现的是一页空白。

4.打包后css中的图片加载不出来：打开build下的utils.js文件，增加下面一句。否则会显示不出图片来。

5.此项是与css有关的，当我做了一个div包img的结构时，突然发现div的默认长宽并不是和img的长宽一致，大概有了4px的误差，最后经高人点拨是没有加上font-size:0px;导致的。

6.安装mock时报：npm ERR! Maximum call stack size exceeded，即npm错误！超出了最大调用堆栈大小。后来才反应过来公司的网不好，我用cnpm下载试试，果然，秒成功。

7.使用padding-top:(percentage)实现响应式背景图片。

       实现的基本原理：将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，padding-top = （高度 / 宽度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝  30.85%;  来自：理解CSS3中的background－size(对响应性图片等比例缩放) - 龙恩0707 - 博客园

8.解决ios下键盘弹出时把输入框遮挡住的bug。

/* 软键盘弹起时，解决输入框被遮挡 */
document.body.addEventListener('focusin', (e) =>{
  let that = this;
  var timer1 = setInterval(function() {
    e.target.scrollIntoView(true);
    document.body.scrollTop = document.body.scrollHeight;
    clearInterval(timer1);
  }, 100)
})
/* 软键盘消失后，解决页面无法回弹 */
document.body.addEventListener('focusout', (e) =>{
  var ua = navigator.userAgent.toLowerCase();
  if(/micromessenger/.test(ua)) {
      if(/iphone|ipad|ipod/.test(ua)) {
          var currentPosition, timer2;
          var speed = 1;
          timer2 = setInterval(function() {
              currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
              currentPosition-=speed;
              window.scrollTo(0,currentPosition);
              currentPosition+=speed;
              window.scrollTo(0,currentPosition);
              clearInterval(timer2);
          }, 1);
      }
  }
})

9.在for循环中使用遍历的数据做判断，明明输出的值已经发生改变，但是if或者show判断没生效的解决方法。

在方法中加入this.$forceUpdate()来强制重新渲染就好了。。。

10.在elementUI项目中有用到其自带的icon时，打开控制的刷新页面时，有时图标icon会变成乱码的解决方法，查看pageage.json中是否有安装dart-sass，有的话就把dart-sass卸载了，安装node-sass便可，具体原理和其他方法看下面这个网站：

https://www.jianshu.com/p/52aef514a592

注：安装完node-sass后一定要看看pageage.json里是否还有sass，或者看下打包好的appxxxx.css里的content:“”是否为这样，如果是这样，就把sass通过命令npm uninstall sass删除即可。