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: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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
