vue運行卡死的問題

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

這篇文章主要介紹了vue運行卡死的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue運行為何卡死

有兩個原因會造成這個結(jié)果：

modules中缺少依賴，使用npm install 命令重新加載依賴
Vue規(guī)定每個template中必須有一個根div，如果有兩個div并行，就會產(chǎn)生死循環(huán)，導(dǎo)致build卡死

vue項目打包后卡死解決

element使用el-tabs導(dǎo)致瀏覽器卡死

使用ElementUi開發(fā)后臺本地是好的，打包后有一個頁面打開就卡死瀏覽器，經(jīng)排查發(fā)現(xiàn)在是由于引起的。

將vue、vue-template-compiler element-ui升級,發(fā)現(xiàn)問題還是存在。

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

經(jīng)過不斷嘗試推薦兩種解決方案

解決方案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="結(jié)算信息" name="fourth">結(jié)算信息</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="結(jié)算信息" name="fourth">結(jié)算信息</el-tab-pane>
            </el-tabs>

      </el-col>
    </el-row>
    <div>
</template>