The mpvue static page is blank after the build is packaged and uploaded.

problem description

mpvue static page after build is packaged and uploaded, the first page is blank
there is no problem to develop in the development tool, and there is no problem to preview

the environmental background of the problems and what methods you have tried

mpvue static page after build is packaged and uploaded, the first page is blank

it"s OK to develop in the development tool, and there"s no problem with previewing.
after uploading, turn on debug mode with your mobile phone, and jump to the home page in the header navigation bar

.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< template >
< div class= "warp" >

   <div class="container">
       <div class="avatar-box">
           <div class="avatar">
               <open-data  type="userAvatarUrl"></open-data>
           </div>
           <div class="user-name">
               <open-data type="userNickName"></open-data>
           </div>
            
            <div class="lottery-tab-bar">
                <a href="../lottery/main"></a>
                <a class="lot2" href="../selected-record/main"></a>
            </div>
       </div>
       <div class="common-list">
           <van-cell-group>
          <van-cell title="" 
                url="/pages/dashboard/index"
              is-link/>
        </van-cell-group>
       </div>
   </div>
   
   
   <div class="bottom-tabbar-nav-wrap">
        
        
        
        <a class="bottom-tabbar-item" href="../index/main">
            <div class="bottom-tabbar-icon hover-class-select">
                <img class="image" src="../../images/icon-home-select.png"/>
            </div>
            <div class="bottom-tabbar-text"></div>
            
        </a>
        
        <div class="bottom-tabbar-item" >
            <div class="bottom-tabbar-icon hover-class-select">
                <img class="image" src="../../images/icon-center-select.png"/>
            </div>
            <div class="bottom-tabbar-text"></div>
        </div>
        
    </div>
   

< / div >
< / template >

< script >

export default {

data() {
    return {

    }
},
components: {

},

methods: {
    
}

}
< / script >

< style >


/**/

.bottom-tabbar-nav-wrap {
background:-sharpFFFFFF;
box-shadow:0 1px 2px 0 rgba;
height:47px;
width:100%;
position:fixed;
bottom:0;
left:0;
color:-sharp999;
font-size:11px;
zMui indexindex9;
display:flex;
-webkit-box-align:stretch;
-ms-flex-align:stretch;
align-items:stretch;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}

.bottom-tabbar-nav-wrap .bottom-tabbar-item {
-webkit-box-flex:1;
flex:1;
width:33.3333333333%;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
position:relative;
border: none;
}

.bottom-tabbar-nav-wrap .bottom-tabbar-item .bottom-tabbar-icon:not (.show) {
position:relative;

}
.bottom-tabbar-nav-wrap .bottom-tabbar-item .bottom-tabbar-icon {
margin-top:1px;

}
.bottom-tabbar-nav-wrap .bottom-tabbar-item .bottom-tabbar-icon,.bottom-tabbar-nav-wrap .bottom-tabbar-item .image, .bottom-tabbar-nav-wrap .bottom-tabbar-item. Image-select {
width:26px;
height:26px;
display:block;

}

/ * .bottom-tabbar-nav-wrap. Bottom-tabbar-item .hover-class-select .image {
opacity:0;

} * /
.bottom-tabbar-nav-wrap .bottom-tabbar-item .image {

opacity:1;

}
.bottom-tabbar-nav-wrap .bottom-tabbar-item .image, .bottom-tabbar-nav-wrap .bottom-tabbar-item. Image-select {
position:absolute;
left:0;
top:0;

}



.warp{
    width: 100%;
    height: 100%;
    background: -sharpf3f3f3;
    box-sizing: border-box;
}
.container{
    padding-bottom: 54px;
    
}
.avatar-box{
    width: 100%;
    margin: 14px auto 14px;
    padding: 20px 0 10px;
    background: -sharpfff;
}
.avatar{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-box .image{
    width: 100%;
    height: 100%;
}
.user-name{
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}
.lottery-tab-bar{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.lottery-tab-bar a{
    width: 50%;
    height: 20px;
    text-align: center;
    line-height: 17px;
    font-size: 14px;
    
}

.lot2{
    border-left: 1px solid -sharpccc;
}

.common-list{
    height: 40px;
}

< / style >

what result do you expect? What is the error message actually seen?

it is hoped that both the upload trial version and the normal production environment will display normally

Menu