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的代码实现

    这篇文章主要介绍了Vue3集成json-editor-vue3的代码实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • 利用Vue v-model实现一个自定义的表单组件

    利用Vue v-model实现一个自定义的表单组件

    本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • vue全屏事件开发详解

    vue全屏事件开发详解

    这篇文章主要为大家详细介绍了vue全屏事件的开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • vue中iframe使用以及结合postMessage实现跨域通信

    vue中iframe使用以及结合postMessage实现跨域通信

    这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中的render函数、h()函数、函数式组件详解

    vue中的render函数、h()函数、函数式组件详解

    在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM,这篇文章主要介绍了vue中的render函数、h()函数、函数式组件,需要的朋友可以参考下
    2023-02-02
  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js

    这篇文章主要介绍了详细对比Ember.js和Vue.js,对JS框架感兴趣的同学,可以参考下
    2021-05-05
  • Vue + iView实现Excel上传功能的完整代码

    Vue + iView实现Excel上传功能的完整代码

    前一段时间项目经历了前端上传文件的过程,首先进入页面会展示默认的样子,选中要上传的excel文件,本文通过实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2021-06-06
  • vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式

    vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式

    通过require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧
    2023-10-10
  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue prop传值类型检验方式

    vue prop传值类型检验方式

    这篇文章主要介绍了vue prop传值类型检验方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论