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

lt123345

页面配置如下：

 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：

访问 https://www.matrixsci.cn/xshopping/pages/stories/stories
期望：显示 tabbar。
实际：tabbar没有显示，其中能看到 taro-tabbar 元素有这个类：

.taro-tabbar__tabbar-hide {
    display: none;
}

点击一个框进入子页面，再返回。
此时正常显示tabbar。
刷新页面
期望：显示 tabbar。实际：tabbar没有显示，跟第二步一样。

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

lt123345

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

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

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

而我调试发现这个this.conf.basename是undefined!

然后继续跟踪这个配置的来源，发现是这里。而这个值的配置是根据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来的呢？