vue运行卡死的问题

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

vue运行为何卡死

有两个 原因 会造成这个结果：

modules中缺少依赖，使用npm install 命令重新加载依赖 Vue规定每个template中必须有一个根div，如果有两个div并行，就会产生死循环，导致build卡死

vue项目打包后卡死解决

element使用el -t abs导致浏览器卡死

使用ElementUi开发后台本地是好的，打包后有一个页面打开就卡死浏览器，经排查发现在是由于引起的。

将vue、vue-template-compiler element-ui升级,发现问题还是存在。

"vue": "^2.6.10",
"element-ui": "^2.13.2",
"vue-template-compiler": "^2.6.10",

经过 不断 尝试推荐两种解决 方案

解决方案1

修改的最外层元素的css样式,加上dis play 和display-direction样式属性

<div class="t -s e Arch -content">
          <template>
            <el-tabs v-model="activeN am e" @tab-click="activehandleClick">
              <el-tab-pane label="订单信息" name=" First ">
                <viewOrder ref="view-order"></viewOrder>
              </el-tab-pane>
              <el-tab-pane label=" 运营 信息" name="second">
                 <view opera tors ref="view-o PE rators"></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%;
  h ei ght: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’报错及解决

总结

以上是 为你收集整理的 vue运行卡死的问题 全部内容，希望文章能够帮你解决 vue运行卡死的问题 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue运行卡死的问题的详细内容...