解決vue生產(chǎn)環(huán)境,頁面卡死的問題

更新時間：2023年07月01日 10:11:02 作者：夏天愛勞動

這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁面卡死的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue生產(chǎn)環(huán)境,頁面卡死的解決

問題描述

開發(fā)環(huán)境沒問題，本地連測試環(huán)境沒問題，打包到測試環(huán)境，直接把頁面整崩k，搞得接口請求啥都沒問題，但是接口preview就是不返回，

解決過程

a.起初認為是后端打包得問題，但是進過分析和后臺測試，基本排除
b.前端重新打包，問題復現(xiàn)，（可能是頁面陷入死循環(huán)，造成網(wǎng)頁渲染出現(xiàn)問題，導致preview沒有返回值）
c.本地沒有問題，本地連測試環(huán)境也沒出現(xiàn)問題，基本排除有出現(xiàn)死循環(huán)的可能
d.最后發(fā)現(xiàn)echarts在初始化的時候會報錯，最后將報錯的代碼刪除掉。（本地也報錯，但是未出現(xiàn)頁面卡死的現(xiàn)象）

最后得出在項目開發(fā)中，任何一個錯誤都可能造成項目卡死和瀏覽器崩潰，所以我們需要嚴謹?shù)拈_發(fā)項目，有錯誤必須解決。

vue項目頁面卡死原因排查

問題描述

點擊后臺管理某一菜單發(fā)現(xiàn)直接卡死，沒有其他報錯信息，整個網(wǎng)頁鼠標變?yōu)槭种笭顟B(tài)不能進行任何操作

問題排查

首先是通過注釋代碼發(fā)現(xiàn)問題是出在以下代碼中

    <basic-container>
      <h4>教師指標數(shù)據(jù)</h4>
      <avue-crud ref="crud"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @refresh-change="refreshChange"
                 @search-change="searchChange">
        <template slot-scope="scope"
                  slot="menu">
          <el-button type="text"
                     icon="el-icon-view"
                     size="small"
                     @click="handleView(scope.row,scope.index)">查看
          </el-button>
        </template>
      </avue-crud>
    </basic-container>

查看日志輸出

在這里插入圖片描述

鎖定到問題是數(shù)據(jù)展示的data 需要array 但是卻拿到了Object

將數(shù)據(jù)展示方式tableData改為 table:[]數(shù)組類型進行展示即可

data:{
return :{
        tableData: []
]
}      
getList() {
        this.tableLoading = true;
        this.tableData=[];
        fetchList(this.listQuery).then(response => {
          console.log("------------------"+response.data.data)
          this.tableData.push(response.data.data) ;
          this.tableLoading = false
        })
      },