我要评论vue运行为何卡死
有两个原因会造成这个结果：
- modules中缺少依赖，使用npm install 命令重新加载依赖
- vue规定每个template中必须有一个根div，如果有两个div并行，就会产生死循环，导致build卡死
vue项目打包后卡死解决
element使用el-tabs导致浏览器卡死
使用elementui开发后台本地是好的，打包后有一个页面打开就卡死浏览器，经排查发现在是由于引起的。
将vue、vue-template-compiler element-ui升级,发现问题还是存在。
"vue": "^2.6.10", "element-ui": "^2.13.2", "vue-template-compiler": "^2.6.10",
经过不断尝试推荐两种解决方案
解决方案1
修改的最外层元素的css样式,加上display和display-direction样式属性
<div class="t-search-content">
<template>
<el-tabs v-model="activename" @tab-click="activehandleclick">
<el-tab-pane label="订单信息" name="first">
<vieworder ref="view-order"></vieworder>
</el-tab-pane>
<el-tab-pane label="运营信息" name="second">
<viewoperators ref="view-operators"></viewoperators>
</el-tab-pane>
<el-tab-pane label="门店信息" name="third">
<viewshop ref="view-shop"></viewshop>
</el-tab-pane>
<el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
</el-tabs>
</template>
<style scoped lang="scss">
.lt-search-content{
width:100%;
height:100%;
/*加上display和display-direction样式属性就可以解决页面卡死问题*/
display:flex;
flex-direction:column;
}
解决方案2
使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题
<tempalte>
<div class="log-box">
<el-row>
<el-col :span="24">
<el-tabs v-model="activename" @tab-click="activehandleclick">
<el-tab-pane label="订单信息" name="first">
<vieworder ref="view-order"></vieworder>
</el-tab-pane>
<el-tab-pane label="运营信息" name="second">
<viewoperators ref="view-operators"></viewoperators>
</el-tab-pane>
<el-tab-pane label="门店信息" name="third">
<viewshop ref="view-shop"></viewshop>
</el-tab-pane>
<el-tab-pane label="结算信息" name="fourth">结算信息</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<div>
</template>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论