SoFunction
Updated on 2025-04-05

The problem of running stuck in vue

Why is Vue running stuck?

There are two reasons for this result:

  • Missing dependencies in modules, reload dependencies using npm install command
  • Vue stipulates that there must be a root div in each template. If two divs are in parallel, a dead loop will occur, causing the build to get stuck.

Vue project is stuck after packaged

Element uses el-tabs to cause the browser to get stuck

It is good to use ElementUi to develop the background local area. After packaging, a page will be opened and the browser will be stuck. After troubleshooting, it was found that it was caused.

Upgrade vue and vue-template-compiler element-ui, and find that the problem still exists.

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

After continuous attempts, we recommend two solutions

Solution 1

Modified css style of the outermost element, plus display and display-direction style properties

<div class="t-search-content">
          <template>
            <el-tabs v-model="activeName" @tab-click="activehandleClick">
              <el-tab-pane label="Order Information" name="first">
                <viewOrder ref="view-order"></viewOrder>
              </el-tab-pane>
              <el-tab-pane label="Operational Information" name="second">
                 <viewOperators ref="view-operators"></viewOperators>
              </el-tab-pane>
              <el-tab-pane label="Store Information" name="third">
                <viewShop ref="view-shop"></viewShop>
              </el-tab-pane>
              <el-tab-pane label="Closing Information" name="fourth">Settlement information</el-tab-pane>
            </el-tabs>
          </template>
<style scoped lang="scss">
.lt-search-content{
  width:100%;
  height:100%;
  /* Adding display and display-direction style attributes can solve the problem of page stuck*/
  display:flex;
  flex-direction:column;
}

Solution 2

Using the el-row el-col element to wrap the el-tabs element can also solve the problem of page stuck

<tempalte>
  <div class="log-box">
  
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="activehandleClick">
              <el-tab-pane label="Order Information" name="first">
                <viewOrder ref="view-order"></viewOrder>
              </el-tab-pane>
              <el-tab-pane label="Operational Information" name="second">
                 <viewOperators ref="view-operators"></viewOperators>
              </el-tab-pane>
              <el-tab-pane label="Store Information" name="third">
                <viewShop ref="view-shop"></viewShop>
              </el-tab-pane>
              <el-tab-pane label="Closing Information" name="fourth">Settlement information</el-tab-pane>
            </el-tabs>

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

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.