vue运行卡死的问题

更新时间：2023年01月20日 16:32:42 作者：booleann

这篇文章主要介绍了vue运行卡死的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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>

总结

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

您可能感兴趣的文章:

使用elementUI实现将图片上传到本地的示例
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
一文详解Vue.js与TypeScript的生命周期
Vue与TypeScript的结合使得开发大型应用变得更加容易和高效,本文将详细探讨Vue.js组件中TypeScript的应用,特别是它的生命周期钩子函数,并通过丰富的示例,为你提供一个实战指南,需要的朋友可以参考下
2023-11-11
vue store之状态管理模式的详细介绍
这篇文章主要介绍了vue store之状态管理模式的详细介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
在vue项目中集成graphql(vue-ApolloClient)
这篇文章主要介绍了在vue项目中集成graphql(vue-ApolloClient)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue实现简单计算器案例
这篇文章主要为大家详细介绍了Vue实现简单计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
Vue基于iview实现登录密码的显示与隐藏功能
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Element Timeline时间线的实现
本文主要介绍了Element Timeline时间线的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
v-html渲染组件问题
最近在学习vue，今天正好发现个问题，本文介绍了v-html渲染组件问题，整理了问题的解决方法，有需要的小伙伴可以参考下
2021-05-05
vue使用ECharts实现折线图和饼图
这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09