vue运行卡死的问题

目录

• vue运行为何卡死
• vue项目打包后卡死解决
• 解决方案1
• 解决方案2
• 总结

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>
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• 解决vue-cli项目开发运行时内存暴涨卡死电脑问题
• 解决vue项目运行提示Warnings while compiling.警告的问题
• 关于Vue项目跨平台运行问题的解决方法
• 使用vue-cli初始化项目时运行‘npm run dev’报错及解决

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！