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>

总结

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

您可能感兴趣的文章:

vue实现登陆页面开发实践
本文主要介绍了vue实现登陆页面开发实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
vue使用element-ui tabs切换echarts解决宽度100%方式
这篇文章主要介绍了vue使用element-ui tabs切换echarts解决宽度100%方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
项目中如何使用axios过滤多次重复请求详解
在项目开发中经常需要处理重复点击导致多次调用接口的问题,这篇文章主要介绍了项目中如何使用axios过滤多次重复请求的相关资料,需要的朋友可以参考下
2021-07-07
通过vue-cli3构建一个SSR应用程序的方法
这篇文章主要介绍了通过vue-cli3构建一个SSR应用程序,以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
2018-09-09
Vue2和Vue3中如何使用WebSocker封装详解
如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用,下面这篇文章主要给大家介绍了关于Vue2和Vue3中如何使用WebSocker封装的相关资料,需要的朋友可以参考下
2024-07-07
vue3导入excel并解析excel数据渲染到表格中(纯前端实现)
在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,下面这篇文章主要给大家介绍了关于vue3导入excel并解析excel数据渲染到表格中的相关资料,文中介绍的方法是纯前端实现,需要的朋友可以参考下
2024-04-04
vue-路由精讲二级路由和三级路由的作用
这篇文章主要介绍了vue-路由精讲二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vite结合Vue删除指定环境的console.log问题
这篇文章主要介绍了Vite结合Vue删除指定环境的console.log问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue3使用viewer的详细用法举例
viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
2023-12-12
Vue如何实现验证码输入交互
这篇文章主要介绍了Vue实现验证码输入交互的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12