vue + element 错误收集
- 1. 错误1：Uncaught (in promise) cancel
- 2. 错误2：在scss预编译中使用组件样式穿透“>>>”时，在我电脑上有效果，在同事电脑上没有效果
- 3. 错误3：在vue项目中使用el-menu，设置侧边栏的默认显示，一直显示不了
- 4. 错误4：带返回值的递归函数返回值为undefined
- 5. 错误5：路由菜单侧边栏在收起时还会显示标题文字和小图标
- 6. 错误6：TypeError: "exports" is read-only / Cannot assign to read only property 'exports' of object '#<Object>'
- 7. 错误7: el-dialog 遮罩层问题
- 8. 注意：height：100%；继承的值
- 9. vue3 中引入 cesium报错
- 10. vue3中自动引入Element-plus报错
- 11. vue + axios 返回二进制流
- 12. vue + elment-ui 中树组件:el-tree
- 13. vue + elementui中的v-for嵌套input
- 14. vue + elementui中的时间选取
- 15. vue + elementui中的动态合并表格行
- 16. 解决警告 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
- 17. 高德地图报错
1. 错误1：Uncaught (in promise) cancel
组件名称：messageBox组件
错误原因：在this.$megbox({}) 的后面没有加上 .catch(() => {})
2. 错误2：在scss预编译中使用组件样式穿透“>>>”时，在我电脑上有效果，在同事电脑上没有效果
错误分析：可能是样式穿透“>>>”兼容性问题
解决办法：用“::v-deep”替换 “>>>”
整理：组件样式穿透有三个写法：“>>>”、“/deep/”、“::v-deep”
-
区别
- 如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改
- 项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
- /deep/在vue-cli3可能会导致变异报错。这个时候用::v-deep
- ::v-deep在预处理器 scss 、sass、less 比较通用
3. 错误3：在vue项目中使用el-menu，设置侧边栏的默认显示，一直显示不了
<!-- 发生错误的代码 -->
<el-menu
class="el-menu-vertical-demo"
:collapse="isCollapse"
:text-color="sideStyle.textColor"
:default-active="defaultActive"
:active-text-color="sideStyle.activeTextColor"
:background-color="sideStyle.bgColor">
<menu-com v-for="item in menuObj.children" :key="item.id" :item="item" />
</el-menu>
错误原因：:key="item.id"这个没有值
解决：修改为 :key="item.name"
其实这是一个vue组件多次使用的问题，比如组件内容错位，组件内容有联动，组件内容没有达到预期的效果，
就是因为在同一个页面多次调用同一组件，没有使用唯一key造成的
4. 错误4：带返回值的递归函数返回值为undefined
错误来源：在进行尾部递归的时候没有在函数之前加return
代码：
// 获取json数据的第一个子级
getChild (json) {
if(json.length && json[0].children && json[0].children.length) {
// 错误写法
// this.getChild(json[0].children)
return this.getChild(json[0].children)
} else {
return json[0]
}
}
5. 错误5：路由菜单侧边栏在收起时还会显示标题文字和小图标
错误原因：对照elmentui文档，是因为动态菜单组件必须一个div根元素，就会多一层div标签
错误图片:
解决办法：暴力解决
```css
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
```
6. 错误6：TypeError: “exports” is read-only / Cannot assign to read only property ‘exports’ of object ‘#’
错误原因：用webpack打包之后才会有这个错误，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
错误修正: export default 替换 module.exports
7. 错误7: el-dialog 遮罩层问题
这种问题包括，el-dialog里面的图片查看器显示在遮罩层后面，el-dialog和v-viewer层级问题，嵌套el-dialog被遮住问题，都是层级问题，
解决办法无非是提高层级或者降低层级（把dialog append-to-body 也属于提高层级）
// 降低层级 dialog的默认层级为2000为自动增加
import elementui from 'element-ui'
Vue.use(elementui, { zIndex: 1000 })
// 提高层级
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999,
} })
8. 注意：height：100%；继承的值
子元素的height: 100%；只能继承父元素的 height 属性，不能继承父元素的 min-height: 300px; 样式， 也不能继承 max-height: 300px; 属性。
9. vue3 中引入 cesium报错
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
错误原因：主要原因是wenpace在加载import.meta的时候需要一个loader，安装一下就行了，在vue3+vite中就没有这个问题
npm i @open-wc/webpack-import-meta-loader -S
然后在vue.config.js里面配置,没有就在项目根目录新建一个
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /.js$/,
use: {
loader: '@open-wc/webpack-import-meta-loader',
},
},
],
},
},
}
10. vue3中自动引入Element-plus报错
ERROR Invalid options in vue.config.js: “plugins” is not allowed
- 错误原因：vue.config.js/vue.config.ts 不能直接在module.exports 里面添加属性 - plugins
- 错误修正： 把 plugins 放在configureWebpack 里面就行了
module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
}
}
11. vue + axios 返回二进制流
错误：vue项目中，结合axios调用后端接口返回excel二进制流，下载excel，返回得excel无法打开，
// vue 代码
post(url, data).then()
// post封装
export default post (url, data) {
return request({
url,
method: 'post',
data,
})
}
修改之后代码
//vue代码
postExcel (url, data).then()
// postExcel封装
export default postExcel (url, data) {
return request({
url,
method: 'post',
data,
headers: { 'Content-Type': 'application/json,charset=utf-8' },
responseType: 'arraybuffer', // 二进制流
})
}
12. vue + elment-ui 中树组件:el-tree
错误：一个页面使用多个el-tree组件的时候，并且都是懒加载，并且load方法不一样的时候，如果几个组件使用v-if,v-else-if，所有的el_tree组件都会使用第一个load方法
原因：因为在组件中 :load=“loadNode” ,在页面渲染的时候loadNode就会被加载，因为使用的if-else的切换方式，那么就只会加载第一个loadNode方法，而之后的loadNode方法没有加载，就会使用第一个loadNode
13. vue + elementui中的v-for嵌套input
错误： input框，输入一个字符就自动失去焦点
原因：因为是两个嵌套的v-for，为了不让key不一样，使用了index + Date.now()的方式，这样的话导致每一次输入key值就发生变化，就会重新渲染
解决办法： 使用v-show切换，这样所有的loadNode方法一开始都会被加载，就可以了
（长期更新）
14. vue + elementui中的时间选取
错误：给时间选取添加验证的时候，报错dateObject.getTime is not a function
原因：给时间选取器添加属性value-format=“YYYY-MM-DD HH:mm:ss”，dataObject得到的就不再是一个时间对象，而是字符串，所以报错
解决办法：去掉value-format="YYYY-MM-DD HH:mm:ss"就是了，在需要的时候重新再转一次
15. vue + elementui中的动态合并表格行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// rowIndexNumber: 第一个数据的index
// rowSpanNumber: 合并行跨越的行数 - 1
let rowSpanOBj = {
71: { rowIndexNumber: 0, rowSpanNumber: 20 },
72: { rowIndexNumber: 21, rowSpanNumber: 11 },
73: { rowIndexNumber: 33, rowSpanNumber: 5 },
74: { rowIndexNumber: 39, rowSpanNumber: 5 },
83: { rowIndexNumber: 45, rowSpanNumber: 3 },
}
if (columnIndex === 0) {
let array = Object.values(rowSpanOBj)
for (let i = 0; i < array.length; i++) {
const el = array[i]
if (rowIndex === el.rowIndexNumber && el['rowSpanNumber'] > 0) {
return {
rowspan: el['rowSpanNumber'] + 1,
colspan: 1
}
} else if (rowIndex <= (el['rowSpanNumber'] + el['rowIndexNumber']) && el['rowSpanNumber'] > 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
实现逻辑：
重组数据，保证数据是按照ID从小到大的顺序排列
16. 解决警告 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
17. 高德地图报错
错误原因：
高德地图是绑定到windows的，一个项目内使用了多个用户（一个用户一个key）、多个版本就会报错
解决办法：
使用同一个用户、同一个版本就解决了
错误原因：
轨迹不能使用3D地图模式
解决办法：修改为2D就可以了
扫一扫
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
