mpvue 静态页面 build打包上传以后首页空白

Question

问题描述

mpvue 静态页面 build打包上传以后首页空白
在开发工具中开发是没问题的，预览也是没有问题的

问题出现的环境背景及自己尝试过哪些方法

mpvue 静态页面 build打包上传以后首页空白

在开发工具中开发是没问题的，预览也是没有问题的
在上传以后 ，用手机开启调试模式，在头部导航栏的跳转首页选项可以跳到首页

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<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:#FFFFFF;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.81);
height:47px;
width:100%;
position:fixed;
bottom:0;
left:0;
color:#999;
font-size:11px;
z-index:9;
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: #f3f3f3;
    box-sizing: border-box;
}
.container{
    padding-bottom: 54px;
    
}
.avatar-box{
    width: 100%;
    margin: 14px auto 14px;
    padding: 20px 0 10px;
    background: #fff;
}
.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 #ccc;
}

.common-list{
    height: 40px;
}

</style>

你期待的结果是什么？实际看到的错误信息又是什么？

希望上传 体验版 和正常的生产环境都正常显示