Qwerty Learner 是一个练习打字的 App.

一、来源

之前 阮一峰周刊发现的开源项目。

仓库地址

二、部署

2.1 vercel

仓库推荐的部署方式。

只需要 点击 Deploy 按钮，克隆仓库，修改输出目录为 build 即可。

  1. 更新 Vercel Build & Development Settings -> Output Directory：”build”
  2. Click Deploy Button

2.2 Cloudflare Pages

  1. 克隆仓库

  2. 部署框架 None

  3. 添加环境变量

1
YARN_ENABLE_IMMUTABLE_INSTALLS=false
  1. 构建部署命令
1
yarn install && yarn build
  1. 输出目录
1
build

2.3 Edgeone Page

同 Cloudflare Pages

三、效果

https://qwerty-learner.bravexist.cn

效果图

四、踩坑记录

  • CF Pages 、Edgeone检测到 yarn.lock 会强制用 yarn 安装，无法用 npm 绕过
  • 项目 lockfile 是 Yarn 1 格式，CF 环境为 Yarn 4，版本不兼容触发 YN0028
  • 通过环境变量关闭 immutable 检查解决
  • 输出目录是 build 而非 Vite 默认的 dist（项目自定义了构建路径）
1
YN0028: The lockfile would have been modified by this install, which is explicitly forbidden.