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:
- 访问 https://www.matrixsci.cn/xshopping/pages/stories/stories
- 期望:显示 tabbar。
实际:tabbar没有显示,其中能看到taro-tabbar
元素有这个类:
.taro-tabbar__tabbar-hide { display: none; }
- 点击一个框进入子页面,再返回。
- 此时正常显示tabbar。
- 刷新页面
- 期望:显示 tabbar。实际:tabbar没有显示,跟第二步一样。
能否帮忙看一下,是否跟部署到子目录有关。
-
自己解决了。问题主要是因为我在文件
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
来的呢?