vue h5部署后,首次进入页面没有显示 tabbar,进入子页面再返回就可以



  • 页面配置如下:

     pages: [
        'pages/index/index',
        'pages/stories/stories',
        'pages/stories/storyLists',
        'pages/stories/storydetail',
      ],
      tabBar: {
        color: '#c6c6c6',
        selectedColor: '#f77bab',
        list: [
          {
            pagePath: 'pages/index/index',
            text: '首页',
            iconPath: 'images/tabbar/home.png',
            selectedIconPath: 'images/tabbar/home-selected.png'
          },
          {
            pagePath: 'pages/stories/stories',
            text: '品牌故事',
            iconPath: 'images/tabbar/guidelines.png',
            selectedIconPath: 'images/tabbar/guidelines-selected.png'
          },
          ...
    

    尝试过的步骤A:

    1. 访问 https://www.matrixsci.cn/xshopping/pages/stories/stories
    2. 期望:显示 tabbar。
      实际:tabbar没有显示,其中能看到 taro-tabbar 元素有这个类:
    .taro-tabbar__tabbar-hide {
        display: none;
    }
    
    1. 点击一个框进入子页面,再返回。
    2. 此时正常显示tabbar。
    3. 刷新页面
    4. 期望:显示 tabbar。实际:tabbar没有显示,跟第二步一样。

    能否帮忙看一下,是否跟部署到子目录有关。



  • 自己解决了。问题主要是因为我在文件prod.js配置了部署的子目录:

      h5: {
        publicPath: '/xshopping/',
        router: {
          basename: '/xshopping/'
        },
    

    看了一下源码,tabbar判断有没有basename是用的this.conf.basename,详见这里

    而我调试发现这个this.conf.basenameundefined!

    然后继续跟踪这个配置的来源,发现是这里。而这个值的配置是根据app.config.ts文件里的tabBar.basename来的!

    所以解决方法就是修改app.config.ts文件:

    const isProd = process.env.NODE_ENV === 'production'; // 加了这行!
    export default {
      pages: [...],
      tabBar: {
        color: '#c6c6c6',
        selectedColor: '#f77bab',
        basename: isProd ? '/xshopping' : '', // 加了这行!
    

    再次编译上传,已经都变得正常了~

    话说,为什么taro-tabbar读取的basename不是从router.basename来的呢?


登录后回复