unibest 实测:照官网命令建的项目,勾个 i18n 就白屏

unibest 这个 uniapp 模板最近挺火,GitHub 加 Gitee 两边星星加起来 4000 多。

我照官网文档给的命令建了个项目,跑起来是白屏。

不是网络问题,也不是我环境脏——我建了第二个项目做对照,问题出在一个勾选项上。

unibest 实测封面:i18n 一勾就白屏
图1 · unibest 实测封面

先说它是啥

一句话:uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的一套启动模板。

你平时开新 uniapp 项目要自己补的那些东西——路由、Layout、Pinia、请求封装与拦截、登录拦截、多语言、UnoCSS、ESLint、格式化——它提前配好了。按官网自己的说法,拿到的是「可以直接开始干活」的工程,不是空白模板。

它省的是搭架子的时间。这句话记住,后面有用。

建项目这步,先把两个版本号摆出来了

我跑的是带 i18n 的完整命令:

pnpm create unibest probe-unibest -u wot-ui-v2 \
  -p h5,mp-weixin -l -i

终端第一行就挺有意思:

create-unibest@v4.0.16 快速创建 unibest@v4.4.1 项目

脚手架 4.0.16,模板 4.4.1——两个号各走各的。顺手又对了下第三处:官网文档站的版本徽标写的是 4.1.1。

三个数字,三个地方,谁也管不着谁。不影响用,但你能看出来文档站没跟上代码。

安装完 pnpm dev:h5,Vite 起来了,页面 200,一片白。

白屏的根因,两行代码

我往 index.html 里塞了个 window.onerror 捕获器,再抓一次:

Uncaught ReferenceError: Cannot access 'HOME_PAGE' before initialization
    at /src/tabbar/store.ts:72:88

DOM 里 <div id="app"> 是空的——Vue 压根没挂载。

原因翻到源码就清楚了,两个文件互相 import,成了个环:

src/utils/index.ts 第 4 行 import { isPageTabbar } from '@/tabbar/store',而 src/tabbar/store.ts 第 5 行 import { HOME_PAGE } from '@/utils'。

HOME_PAGE 定义在 utils 的第 179 行,可 store.ts 第 115 行在模块顶层就读它(ref(... || HOME_PAGE))。执行到那儿的时候,utils 还没走到 179 行,HOME_PAGE 还在暂时性死区里。

这是典型的循环依赖踩 TDZ。关键在最后一句:isPageTabbar 这个 import 只存在于 i18n 分支。也就是说,不勾 i18n 的人,一辈子碰不到这个坑。

本机实测原文:CLI 版本自报与浏览器控制台报错
图2 · 本机实测原文(CLI 版本自报 + 浏览器报错 + DOM 快照)

对照组:只差一个 -i

我拿同样的命令、去掉 -i,又建了一个:

勾了 i18n 的那个,utils/index.ts 里有 @/tabbar/store 这行 import,跑起来白屏,#app 子节点是 0。

没勾的那个,没有这行 import,首页正常渲染出来。

同机器、同一天、同一套命令,变量只有一个。所以这不是环境问题,是模板自己的问题。

实测对照卡:勾了 i18n / 没勾 i18n / 上游 PR #458 状态
图3 · 实测对照(含上游 PR 状态)

顺手查了上游:GitHub 上有人提过修复 PR #458,标题就叫「修复 HOME_PAGE 循环依赖导致的启动报错」,10 月 6 日提的,10 月 11 日被关闭,没有合并。我今天全新 clone 的模板里,这个循环依赖还在。

说句公道话

但我不打算因为这个坑就把它一棍子打死。

这个坑是有条件的。你不勾 i18n,它完全正常,我那个对照组跑得干干净净,首页、tabbar 全都出来了。你要是不需要多语言,今天就能用。

模板本身配得也是真全。除了官网宣传的那些,我翻仓库还翻到几样官网没重点讲的:真平台清单里除了小程序和 App,还有小红书、飞书、京东、快手、抖音、QQ、百度、支付宝、鸿蒙;根目录直接放了 AGENTS.md,把 AI 协作的三条铁律写死在模板里;Dockerfile 和 nginx.conf 也带了,构建走的是国内镜像。

还有个细节挺有意思:CLI 的克隆源是 Gitee 不是 GitHub,版本号也是从 Gitee API 实时拉的。国内网络友好,这也是它 Gitee 星数(2062)能跟 GitHub(2292)几乎打平的原因。包源码里还有一处上报,会把 CPU 型号、内存、系统和用户名拼起来做个哈希发出去——是匿名哈希,不是明文,但知道一下没坏处。

所以现在该不该用

我的判断分两种人。

不需要多语言的:可以直接上。它的价值在省时间,不在技术含量——架子的活儿它替你干完了,坑还得你自己踩。

需要多语言的:先别急。要么等上游把这个循环依赖修掉,要么自己动手——把 tabbar/store.ts 里读 HOME_PAGE 的那行从模块顶层挪进函数里,或者打断 utils/index.ts 对 tabbar/store 的依赖,都能解。两行代码的事,但你得先知道有这么回事。

模板省的是搭架子的时间,
不是踩坑的时间。

金句卡:模板省的是搭架子的时间,不是踩坑的时间
图4 · 金句卡

常见问题

Q:unibest 免费吗?

A:MIT 协议,完全开源,GitHub 和 Gitee 都有仓库。

Q:白屏这个 bug 只在 i18n 时出现吗?

A:我实测的情况是这样。不勾 i18n 的对照组完全正常,勾了才白屏。

Q:不勾 i18n 就没事,那还能用吗?

A:能用,而且用得挺舒服。但要是你后面又想加多语言,得先把循环依赖处理掉。

Q:支持哪些平台?

A:官方 FAQ 明确说不支持 uni-app x。常规的平台覆盖很广,小程序、App、H5 之外还有小红书、飞书、京东、鸿蒙等,具体得看你选的 UI 库支不支持。

Q:跑起来要什么环境?

A:Node 20 以上、pnpm 9 以上,模板锁的是 pnpm 10.10.0。

这类开源项目的实测我每周都在做,关注不迷路。下篇继续扒一个国内用得上的开发者工具,从官网命令一路跑到它出问题为止。

官网:https://unibest.tech/
Github 开源:https://github.com/feige996/unibest
Gitee 开源:https://gitee.com/feige996/unibest