整理Vue项目开发过程中遇到的常见问题1

1 element UI表格排序sortable最简单的按大小排序，需要添加prop,不然无法使用

表格后面增加的sortable没有作用
解决办法：没有给表格添加prop属性
                                    
  

2 表单清空没有效果，也不是提示报错的原因

解决方法：model中绑定的数据字段和Dom里prop的数据字段是不是完全一致, prop属性是否有写

3 tagview 下拉关闭菜单窗口对不上

侧边栏 顶部固定定位 偏移距离引起的  

解决办法：下拉关闭菜单事件x要减去想对应的距离

4 组件内的样式优先级大于外链全局样式

比如在一个页面里写了一个类名+样式，在其它页面也要用到这个类名，在其它页面第一次刷新时，样式不起作用，而要在设置样式的页面
刷新后，其它页面的样式才会被渲染出来
解决办法： 把样式写在全局文件index里面  styles---index.scss

 5 Dialog 对话框  Vue开发中出现对话框被遮罩层挡住问题解决方案

解决办法：在el-dialog 标签上增加这个属性  :modal-append-to-body="false"

indexOf() 方法可返回数组中某个指定的元素位置。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)返回值

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

A complete log of this run can be found in:debug.log

npm版本太低的原因
全局更新 npm
npm install npm -g 
一、npm 的更新：
查看自己的 npm 版本：npm -v 
查看官方文档可知，使用命令  npm install npm@latest -g 
注意：一定要全局安装，不然node-v还是得到没更新之前的版本
二、node 的更新：
去官网下载需要的版本
我们在覆盖的时候要检查之前安装 node 的路径，使用命令  where node 
也就是说我之前安装在 C:\Program Files\nodejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同，只是安装路径选择为同之
前一样的路径。
安装完后检查是否安装成功 node -v  npm -v

6 编译插件vue-devtools，npm run build后报错 npm ERR! code ELIFECYCLE

错误原因：因为最新版本vue-devtools使用最新版本webpack4，所以node版本至少大于6.11.5
解决办法：卸掉以前装的node，到官网下载安装一个最新版本的node

 7 style 加scoped问题不起作用，需要在选择器前面增加deep深度选择器才能选中元素

scoped 只是针对自定义的增加的类名，id, elment默认样式加scoped不会被渲染出来,
如果我们子组件添加scoped，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的; 
若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,
那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式;
覆盖element默认样式，不同的页面设置不同的值
解决办法：在原有的元素外面包裹一层DIV, 然后在每一个页面设置不同的值，如果只设置一个页面，那么所有页面的样式都会是一样的

 8 表格数据懒加载圈圈位置跑到表格下面去了

解决办法：v-loading.body='boolean' 改成 v-loading='boolean'

9 更换主题颜色后 el覆盖样式不起作用了

解决办法：更改element默认的样式 

10 deep深度选择器ie不支持 首页图标三条横线颜色更改不了 

解决办法：用fill属性控制svg图标的颜色

11 项目启动时遇到以下错误：This dependency was not found.........

This dependency was not found:
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue
in ./src/components/a.vue

To install it, you can run: npm install --save
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu

解决方案： 一般提示出现什么什么找不到时，就是缺少相关依赖包，按提示重新安装提示的依赖包即可
npm install sass-loader --save
npm install node-sass --save

12 [Vue warn]: Duplicate keys detected: ‘101121201’. This may cause an update error.

解决方案：使用v-for遍历时，没有设置key值
注意：key值是必须唯一的，如果重复就会报错，可以把key值改为index（其实就是用索引做key值），就可以避免这个情况：


    
{{item.name}

13 找不到未定义的resetFields属性

vue.esm.js?efeb:591[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"
解决办法：给表单添加ref属性

14 我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：

1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到

数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： 
push() //向数组的结尾添加一个或多个元素并返回新的长度
pop() //删除元素并返回数组的最后一个元素
shift() //向数组的开头添加一个或多个元素并返回新的长度
unshift() //删除元素并返回数组的第一个元素
splice() //删除元素并返回被删除元素的数组
sort() //对数组中元素进行排序
reverse() //颠倒数组中元素的顺序
split() //方法用于把一个字符串分割成字符串数组
vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
Vue 不能检测以下变动的数组： 
① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
② 当你修改数组的长度时，例如： vm.items.length = newLength
三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。

15 常见状态码错误

Request failed with status code 400
解决方法：把传给后台的时间参数转换成时间戳的格式

Error occured while trying to proxy to: localhost:9527/api//auth/jwt/token
Failed to load resource: the server responsed with a status of 504 (Gateway Timeout)
解决方法：后台服务器可能没有启动

errError: Request failed with status code 401 (Unauthorized)
解决方法：交给后端开发人员处理

常见状态码解释

200 请求成功

304 请求的页面没有修改

400 请求语法错误服务器不理解
401 请求要求用户的身份信息
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 请求资源找不到

500 服务器内部错误，无法完成请求
504 充当网关或代理的服务器 末及时从远端服务器获取请求

16 如果进去某个页面后，这个页面突然卡住不能动，可能页面中那个标签嵌套不合法 比如查看el-table后面是否多了一个>符号

Do not use built-in or reserved HTML elements as component id:filter 不能用内置的元素作为组件的id名称

17 不能登录系统并提示error occurred while trying to proxy request /api//xx/xx/xx to http://192.168.1.188:8765

解决方法： 
1 看有没有断网
2 服务器的IP地址有没有变
3 服务器地址能否ping通(ipconfig)，如不能拼通，查看本地防火墙是否开启

18 Error: listen EADDRNOTAVAIL 192.168.1.166:9527

Error: listen EADDRNOTAVAIL 192.168.1.166:9527
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1334:19)
    at listenInCluster (net.js:1392:12)
    at doListen (net.js:1501:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Program Files\nodejs\node_cache\_logs\2018-08-28T03_29_03_820Z-debug.log


监听一个当前电脑上不存在的ip的时候，是会出现上述该错误的。比如说原来我的电脑连着一个无线网，并且检查ip地址为192.168.1.123，并且我也用该地址进行监听。但是一旦电脑断开无线网，电脑上无该ip地址，若再次用该地址进行监听，则会出现上述错误。

将这个异常名字分解开来就是E ADDR NOT AVAIL

E：Error

ADDR：Address

NOT：Not

AVAIL：Available

解决方法：查看本地IP地址是否正确 

 19 提示帐户和密码错误，并且报错400 bad request

原因是前端字段类型与后端字段类型不一致
比如时间 数量 单价 价格 里数
编辑数据时input报红，原因是验证规则问题

20 URIError: Failed to decode param '/%3C%=h'

页面入口文件index script标签src路径有问题 h tml字母h后面多了一个空格
解决方法：去掉多余的空格

21 控制台调试出现两个重复的样式 

可能element-ui第三方框架 库模板里面主题index.css文件里多写了一份css样式

 路径如下
// const url = '../../../node_modules/element-ui/lib/theme-chalk/index.css'

解决方法： 去掉UI组件默认样式里面的多余css样式

 22 子路由的值必须是数组, 不然报错router.children.some is not a function

baseRoute: {
    path: '/baseManager',
    component: Layout,
    redirect: 'noredirect',
    name: 'baseManager',
    authority: 'baseManager',
    meta: {
      title: '基础配置管理',
      icon: 'setting'
    },
    children: [
      {
        path: 'userManager',
        component: _import('permission/admin/user/index'),
        name: 'userManager',
        authority: 'userManager',
        meta: {
          title: '用户管理',
          icon: 'fa-user'
        }
      },
      {
        path: 'menuManager',
        component: _import('permission/admin/menu/index'),
        name: 'menuManager',
        authority: 'menuManager',
        meta: {
          title: '菜单管理',
          icon: 'category'
        }
      },
      {
        path: 'groupManager',
        component: _import('permission/admin/group/index'),
        name: 'groupManager',
        authority: 'groupManager',
        meta: {
          title: '角色权限管理',
          icon: 'group_fill'
        }
      }
    ]
  },

23 模板标签套错，提示- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as 正确写法： 实列上的select没有被定义，提示如下报错 Property or method "select" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. El-dropdown标签格式没有嵌套正确，提示如下报错 [Vue warn]: Injection "dropdown" not found

24 Vue js webpack模板里import路径中@符号是什么意思

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

@等价于 /src 这个目录，免得你写麻烦又易错的相对路径，@这是webpack的路径别名

./代表当前项目

../代表上一级项目/是根目录

import vue1 from 'vue' 这句话的意思是： 加载vue模块，并输入变量vue1。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果是模块名，不带有路径，那么必须有配置文件，告诉js引擎该模块的位置。

25 字符串与对象互转

Array.toString()是将数组转化成字符串，因此不带 [ ]

JSON.stringify(Array)是从一个对象解析出JSON字符串，是带[]的

JSON.parse() 是用于从一个字符串中解析出json对象

26 注册组件时，组件名称中间需要用连字符，不然会报错

 27 增加修改表单时，提示错误 Pre:TracePreZuulFilter

原因：传给后台的参数位置顺序放反了

 28 富文本编辑内容返回的数据带标签，后台返回的数据带标签

 29 页面跳转后新页面内容不会自动刷新

//解决办法： 增加以下路由钩子函数，当路由变化时根据id在数据库查找数据，发生create钩子函数之前
beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(vm)
      // 这里vm就是当前页面的实例，可以执行methods中方法
      if (vm.$route.params.id < 1) {
        vm.$refs.form.resetFields();
        // vm.form.imagerBase64 = undefined
        vm.dialogStatus = 'create';
      } else if (vm.$route.params.id) {
        vm.getList();
        vm.dialogStatus = 'update';
      }
    })
  }

 30 vue2.0中.vue文件页面跳转传递参数并获取

//声明式标签写法 



//编程式js写法
this.$router.push(path:'wlWaterWorkSituation',query:{id: this.listData[index].id}})

//页面中获取参数
this.$route.query.id
this.$route.params.id
$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
返回上一个history也是使用$router.go方法

31 拖拽排序不起作用：拖拽元素一定要放在draggble标签内

 
        
        

            {{element.name}}
        
        

 32 MapBox介绍

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
attribution: '? OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map) 
.bindPopup('A pretty CSS3 popup.
 Easily customizable.')
.openPopup();

L.map('map')就是捕获一个
，把它当作一个地图观察器，将地图数据赋予上面。

setView设置地图中心点的经纬度和比例尺，作为用户的视图区域。

L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取，一般都是1-4，天地图做到了1-8。

tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap，当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们，参考htoooth/Leaflet.ChineseTmsProviders。

L.marker就是图标，首先需设置的是图标的坐标，bindPopup是绑定的冒泡提示，里面可以包装任意的innerHTML元素，openPopup是开启提示的方法。

33 无法添加class在模态框上， 设置宽度无效， 在组件上设置poper-class属性即可实现

34 select 设置光标位置select.selectionStart/select.selectionEnd=select.value.length

focusGet (e) {
      const select = e.srcElement
      this.$nextTick(() => {
        // 设置光标位置
        select.selectionStart = select.value.length
        select.selectionEnd = select.value.length
      })
}

35 列表页设置了缓存，详情页面的弹窗关闭后还显示遮罩层,按esc退出又可以了

原因：详情页关闭后的遮罩层是缓存列表页面弹窗的遮罩层，这个页面的弹窗状态被缓存下来了

解决方法：在跳转到详情页面之前关闭列表页面的弹窗

36 tag标题动态更改 正则表达式 当字段类型为date或timestamp时才能操作分区字段按钮，不区分大小写

解决方法：在created更改标题不更新，mounted才更新 updateTagView

const reg = /(date|timestamp)/i 

// 当字段类型为date或timestamp时才能操作分区字段按钮，不区分大小写

const reg = /^(char|varchar|decimal)$/

// 当字段类型为char或varchar或decimal时才能操作字段长度

37 测试环境路由跳转显示空白页面

解决方法：查看路由菜单文件有没有增加菜单  服务菜单有没有增加 测试环境需要手工另外增加

38  this.$set方法一次只能增加一个属性，正则表达式没有位数限制/^\d+\$/

 39 穿梭框控件怎么像树形控件获取当前节点上的数据信息？利用slot-scope属性接收节点上的数据（即渲染的数据）

    
      

        
          
            
             {{ option.label }}
            
               
              
            
          
        
      
      

        取消
        保存
      
    

40 axios get和delete请求无法正常传参（后台接收不到参数|| 控制台不显示参数），提示400 Bad Request

第一个参数为url,第二参数为你要传的参数(假如参数是obj)，参数格式是｛params:obj｝

41 新增页面不经过登录路由跳转不成功,    原因路由被拦截了，router.beforeEach()全局前置守卫

第一步在router文件里面增加新页面的路由
第二步在permission文件设置白名单，如果项目没有设置白名单，当路由为新增的url时，执行next(),可参考login写法
import router from './router'
import { getCookie } from './utils/auth'

// 通过beforeEach钩子来判断用户是否登陆过 有无token
const whiteList = ['/login/', '/regist/', '/'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  console.log(to.matched)
  // 判断是否有登录过
  if (getCookie('userId_dev')) {
    // 如果包含userId_dev 从登录页面跳转 直接跳转到首页 /
    if (to.path === '/login') {
      next('/smartHome/decIndex')
    } else {
      if (to.matched.length === 0) {
        next('/404') // 判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
      }
      next() // 如果匹配到正确跳转
    }
  // 没有登录
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      // 还没有登录过 则跳转到登录界面
      next('/login')
    }
  }
})

42 git提交代码到远程提示HTTP Basic: access denied, 原因本地配置的用户名和密码与远程的不一致

43 进入控制面板，用户账号，凭据管理器

44 场景：有一个成果列表，每个列表上面右下角显示下拉操作菜单，单击小图标鼠标移到下拉菜单时，下拉菜单消失bug

原因 事件冒泡引起的

//vue 阻止事件冒泡

          
            
              

                

                  
                
                

                  
                  {{ item.name }}
                
                
 
                

                  
打开
                  
重命名
                  
指定封面
                  
移除
                
              
            
          
        

45 重命名时，input要自动获取焦点

 // 显示编辑输入框
    showInput (index) {
      this.oldValue = this.listItems[index].name
      if (this.listItems[index].type === null) {
        this.commomFn(index)
        this.$nextTick(() => {
          this.$refs['input' + index][0].$refs.input.focus()
        })
      }
    },

 46 下拉菜单在空白处单击需要隐藏菜单，在mounted钩子中注册一个事件监听器

  mounted () {
    document.addEventListener('click', (e) => {
      if (e.target.className !== 'hoverBox') {
        this.listItems.map(v => {
          if (v.isToggle) v.isToggle = false
        })
      }
    })
  },

  47  zTree树外拖拽，targetNode, moveType只针对树内区域，如果是树外区域返回null

    zTreeOnDrop (event, treeId, treeNodes, targetNode, moveType) {
      let query = {
        'code': treeNodes[0].code,
        'folderId': this.folderId,
        'name': treeNodes[0].name,
        'parentId': treeNodes[0].parentId,
        'type': treeNodes[0].type
      }
      // 如果是把节点拖放到某个区域生成一个元素
      if (treeNodes[0].level === 2) {
        if (this.folderId) {
          // 然后向后端保存数据
          this.$http.post(API.SSAP_moveAchievementFolder, query).then(res => {
            if (res.object.data === '移动成功') {
              this.$parent.getFolderList()
              this.$message({ message: res.object.data, type: 'success', duration: 2000 })
            } else {
              this.$message({ message: res.object.data, type: 'warning', duration: 2000 })
            }
          })
        } else {
          this.$message({ message: '成果只能拖入到文件夹内', type: 'warning', duration: 2000 })
        }
      } else {
        // this.$message({ message: '只有type是scene 的才能移', type: 'warning', duration: 2000 })
      }
    },

 48 promise.all 并发请求

   handleUseStatus (row) {
      this.teamId = row.id
      Promise.all([this.$http.get(API.SSAP_getAll, { params: { keyWord: this.keyWord } }), this.$http.get(API.SSAP_getUseTeams, { params: { id: row.id } })]).then(res => {
        res[0].object.data.forEach(item => {
          item.key = item.id
          item.label = item.name
        })
        this.shuttleBoxData = res[0].object.data
        res[1].object.data.forEach(item => {
          item.key = item.id
          item.label = item.name
        })
        this.defaultData = res[1].object.data.map(v => v.id)
        this.shuttleBoxVisible = true
      })
    },

49 JSON数据递归生成树结构

let = [{
    "regionCode": "G0L0",
    "businessLine": null,
    "regionName": "总公司",
    "id": null,
    "regionLevel": 0,
    "parentRegionCode": null
  }]

  function getTree(treeData, parentRegionCode) {
    const treeArr = []
    for (var i = 0; i < treeData.length; i++) {
      var node = treeData[i]
      if (node.parentRegionCode === parentRegionCode) {
        var newNode = {
          id: node.id,
          label: node.regionName,
        }
        temp = getTree(treeData, node.regionCode);
        if (temp.length > 0) {
          newNode.children = temp;
        }
        treeArr.push(newNode)
      }
    }
    return treeArr
  }
  console.log(data.object.data, getTree(data.object.data, null));

 50 解决本地调试跨域问题 - 副本.bat (注意一定是.bat后缀文件，关闭浏览器再执行这个脚本)

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"  --disable-web-security --user-data-dir

还没有整理完全，后面有时间继续完善