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>

总结

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

您可能感兴趣的文章:

Vue3集成json-editor-vue3的代码实现
这篇文章主要介绍了Vue3集成json-editor-vue3的代码实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
利用Vue v-model实现一个自定义的表单组件
本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
vue全屏事件开发详解
这篇文章主要为大家详细介绍了vue全屏事件的开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
vue中iframe使用以及结合postMessage实现跨域通信
这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue中的render函数、h()函数、函数式组件详解
在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM，这篇文章主要介绍了vue中的render函数、h（）函数、函数式组件,需要的朋友可以参考下
2023-02-02
详细对比Ember.js和Vue.js
这篇文章主要介绍了详细对比Ember.js和Vue.js，对JS框架感兴趣的同学，可以参考下
2021-05-05
Vue + iView实现Excel上传功能的完整代码
前一段时间项目经历了前端上传文件的过程，首先进入页面会展示默认的样子，选中要上传的excel文件，本文通过实例图文相结合给大家介绍的非常详细，需要的朋友参考下吧
2021-06-06
vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式
通过require动态引入, 发现报错：require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧
2023-10-10
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue prop传值类型检验方式
这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07