整理Vue项⽬开发过程中遇到的常见问题1
1 element UI表格排序sortable最简单的按⼤⼩排序，需要添加prop，不然⽆法使⽤
1表格后⾯增加的sortable没有作⽤
2解决办法：没有给表格添加prop属性
3<el-table-column align="center" label="闸门名称"  prop='gatename' sortable>
4  <template slot-scope="scope">
5      <span>{{w.gatename}}</span>
6  </template>
7</el-table-column>
2 表单清空没有效果，也不是提⽰报错的原因
解决⽅法：model中绑定的数据字段和Dom⾥prop的数据字段是不是完全⼀致, prop属性是否有写
3tagview 下拉关闭菜单窗⼝对不上
1侧边栏顶部固定定位偏移距离引起的
2
3解决办法：下拉关闭菜单事件x要减去想对应的距离
4 组件内的样式优先级⼤于外链全局样式
1⽐如在⼀个页⾯⾥写了⼀个类名+样式，在其它页⾯也要⽤到这个类名，在其它页⾯第⼀次刷新时，样式不起作⽤，⽽要在设置样式的页⾯2刷新后，其它页⾯的样式才会被渲染出来
3解决办法：把样式写在全局⽂件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
1npm版本太低的原因
2全局更新 npm
3npm install npm -g
4⼀、npm 的更新：
5查看⾃⼰的 npm 版本：npm -v
6查看官⽅⽂档可知，使⽤命令  npm install npm@latest -g
7注意：⼀定要全局安装，不然node-v还是得到没更新之前的版本
8⼆、node 的更新：
9去官⽹下载需要的版本
10我们在覆盖的时候要检查之前安装 node 的路径，使⽤命令  where node
11也就是说我之前安装在 C:\Program Files\nodejs ⽂件夹下。覆盖安装和前⾯讲到的第⼀次安装⽅法相同，只是安装路径选择为同之
12前⼀样的路径。
13安装完后检查是否安装成功 node -v  npm -v
6 编译插件vue-devtools，npm run build后报错 npm ERR! code ELIFECYCLE
1错误原因：因为最新版本vue-devtools使⽤最新版本webpack4，所以node版本⾄少⼤于6.11.5
2解决办法：卸掉以前装的node，到官⽹下载安装⼀个最新版本的node
7 style 加scoped问题不起作⽤，需要在选择器前⾯增加deep深度选择器才能选中元素
1scoped 只是针对⾃定义的增加的类名，id, elment默认样式加scoped不会被渲染出来,
2如果我们⼦组件添加scoped，同样的，如果⼦组件也⽤scoped标识了，那么在⽗组件中是不能设置⼦组件中的节点的;
3若⽗组件有scoped，⼦组件没有设置，同样，也是不能在⽗组件中设置⼦组件的节点的样式的，因为⽗组件⽤了scoped,
4那么⽗组件中style设置的样式都是唯⼀的了，不会作⽤与其他的组件样式;
5覆盖element默认样式，不同的页⾯设置不同的值
6解决办法：在原有的元素外⾯包裹⼀层DIV, 然后在每⼀个页⾯设置不同的值，如果只设置⼀个页⾯，那么所有页⾯的样式都会是⼀样的
1::v-deep input::-webkit-input-placeholder {
2  color: #4d4d4d !important;
3}
4::v-deep input::-moz-input-placeholder {
5  color: #4d4d4d !important;
6}
7::v-deep input::-ms-input-placeholder {
8  color: #4d4d4d !important;
9}
10
11::v-deep input {
12  font-size: 14px !important;
13  font-family: "Franklin Gothic Book" !important;
14}
8 表格数据懒加载圈圈位置跑到表格下⾯去了
解决办法：v-loading.body='boolean' 改成 v-loading='boolean'
9 更换主题颜⾊后 el覆盖样式不起作⽤了
解决办法：更改element默认的样式
10 deep深度选择器ie不⽀持 ⾸页图标三条横线颜⾊更改不了
1解决办法：⽤fill属性控制svg图标的颜⾊
2<style scoped>
3.el-dialog__wrapper /deep/ .el-dialog {
4  width: 60% !important;
5}
6</style>
11 项⽬启动时遇到以下错误：This dependency was .
1This dependency was not found:
2!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”
3in ./src/components/a.vue
4
5To install it, you can run: npm install --save
6!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”
7
8解决⽅案：⼀般提⽰出现什么什么不到时，就是缺少相关依赖包，按提⽰重新安装提⽰的依赖包即可
9npm install sass-loader --save
10npm install node-sass --save
12 [Vue warn]: Duplicate keys detected: ‘101121201’. This may cause an update error.
1解决⽅案：使⽤v-for遍历时，没有设置key值
2注意：key值是必须唯⼀的，如果重复就会报错，可以把key值改为index（其实就是⽤索引做key值），就可以避免这个情况：
3
4<ul>
5    <li v-for="(item,index) in array" :key="index">{{item.name}</li>
6</ul>
13 不到未定义的resetFields属性
1vue.esm.js?efeb:591[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"
2[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"
3解决办法：给表单添加ref属性
14 我们有时候常碰到vue中明明修改了数据，但是视图⽆法更新，因此我总结了⼀点点碰到此类的情况：
11、v-for遍历的数组，当数组内容使⽤的是arr[0].xx =xx更改数据，vue⽆法监测到
2
3数组数据变动：我们使⽤某些⽅法操作数组，变动数据时，有些⽅法⽆法被vue监测，有些可以
4Vue包装了数个数组操作函数，使⽤这些⽅法操作的数组去，其数据变动时会被vue监测：
5push() //向数组的结尾添加⼀个或多个元素并返回新的长度
6pop() //删除元素并返回数组的最后⼀个元素
7shift() //向数组的开头添加⼀个或多个元素并返回新的长度
8unshift() //删除元素并返回数组的第⼀个元素
9splice() //删除元素并返回被删除元素的数组
10sort() //对数组中元素进⾏排序
11reverse() //颠倒数组中元素的顺序
12split() //⽅法⽤于把⼀个字符串分割成字符串数组
13vue2.0还增加个⽅法可以观测Vue.set(items, indexOfItem, newValue)
14filter(), concat(), slice() 。这些不会改变原始数组，但总是返回⼀个新数组。当使⽤⾮变异⽅法时，可以⽤新数组替换旧数组
15Vue 不能检测以下变动的数组：
16①当你利⽤索引直接设置⼀个项时，vm.items[indexOfItem] = newValue
17②当你修改数组的长度时，例如： vm.items.length = newLength
18三种⽅式都可以解决，使⽤Vue.set、vm.$set()或者数组的splice⽅法。
15 常见状态码错误
1Request failed with status code 400
2解决⽅法：把传给后台的时间参数转换成时间戳的格式
3
4Error occured while trying to proxy to: localhost:9527/api//auth/jwt/token
5Failed to load resource: the server responsed with a status of 504 (Gateway Timeout)
6解决⽅法：后台服务器可能没有启动
7
8errError: Request failed with status code 401 (Unauthorized)
9解决⽅法：交给后端开发⼈员处理
10
11常见状态码解释
12
13200 请求成功
14
15304 请求的页⾯没有修改
16
17400 请求语法错误服务器不理解
18401 请求要求⽤户的⾝份信息
19403 服务器理解请求客户端的请求，但是拒绝执⾏此请求
20404 请求资源不到
21
22500 服务器内部错误，⽆法完成请求
23504 充当⽹关或代理的服务器末及时从远端服务器获取请求
16 如果进去某个页⾯后，这个页⾯突然卡住不能动，可能页⾯中那个标签嵌套不合法⽐如查看el-table后⾯是否多了⼀个>符号Do not use built-in or reserved HTML elements as component id:filter 不能⽤内置的元素作为组件的id名称
1解决⽅法：
input标签placeholder属性
2  1 看有没有断⽹
3  2 服务器的IP地址有没有变
4  3 服务器地址能否ping通(ipconfig)，如不能拼通，查看本地防⽕墙是否开启
18 Error: listen EADDRNOTAVAIL 192.168.1.166:9527
1Error: listen EADDRNOTAVAIL 192.168.1.166:9527
2    at Object._errnoException (util.js:1024:11)
3    at _exceptionWithHostPort (util.js:1046:20)
4    at Server.setupListenHandle [as _listen2] (net.js:1334:19)
5    at listenInCluster (net.js:1392:12)
6    at doListen (net.js:1501:7)
7    at _combinedTickCallback (internal/process/next_tick.js:141:11)
8    at process._tickCallback (internal/process/next_tick.js:180:9)
9    at Function.Module.runMain (module.js:678:11)
10    at startup (bootstrap_node.js:187:16)
11    at bootstrap_node.js:608:3
12npm ERR! code ELIFECYCLE
13npm ERR! errno 1
14npm ERR! shopapp@1.0.0 dev: `webpack-dev-server --inline --progress --config build/f.js`
15npm ERR! Exit status 1
16npm ERR!
17npm ERR! Failed at the shopapp@1.0.0 dev script.
18npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
19
20npm ERR! A complete log of this run can be found in:
21npm ERR!    C:\Program Files\nodejs\node_cache\_logs\2018-08-28T03_29_03_820Z-debug.log
22
23
24监听⼀个当前电脑上不存在的ip的时候，是会出现上述该错误的。⽐如说原来我的电脑连着⼀个⽆线⽹，并且检查ip地址为192.168.1.123，并且我也⽤该地址进⾏25
26将这个异常名字分解开来就是E ADDR NOT AVAIL
27
28E：Error
29
30ADDR：Address
31
32NOT：Not
33
34AVAIL：Available
35
36解决⽅法：查看本地IP地址是否正确
19提⽰帐户和密码错误，并且报错400 bad request
1原因是前端字段类型与后端字段类型不⼀致
2⽐如时间数量单价价格⾥数
3编辑数据时input报红，原因是验证规则问题
20 URIError: Failed to decode param '/%3C%=h'
1页⾯⼊⼝⽂件index script标签src路径有问题 h tml字母h后⾯多了⼀个空格
2解决⽅法：去掉多余的空格
21 控制台调试出现两个重复的样式
1可能element-ui第三⽅框架库模板⾥⾯主题index.css⽂件⾥多写了⼀份css样式
2
3路径如下
4// const url = '../../../node_modules/element-ui/lib/theme-chalk/index.css'
5
6解决⽅法：去掉UI组件默认样式⾥⾯的多余css样式
22 ⼦路由的值必须是数组, 不然报错router.children.some is not a function

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。