vue运行卡死的问题
booleann 人气:0vue运行为何卡死
有两个原因会造成这个结果:
- 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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容