qwerty-learner 部署步骤

项目简介

qwerty-learner 是为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件。基于 React 开发，支持多种词库，包括 CET-4、CET-6、GRE、TOEFL 以及程序员常用词汇等。

基础环境安装

在部署之前，需要先安装基础的运行环境。以下是在不同操作系统中的安装方法： 安装之前先执行：更换源方法

Linux 系统（CentOS/RHEL）

1. 安装 Node.js

# 先切换成root身份
su - root

# 方法一：使用 EPEL 仓库（推荐）
yum install -y epel-release
yum install -y nodejs npm

# 方法二：使用 NodeSource 仓库
curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
yum install -y nodejs

# 验证安装
node --version
npm --version

2. 安装 Git

# 使用 yum 安装
yum install -y git

# 验证安装
git --version

# 配置 Git 用户信息
git config --global user.name "Your Name" #改成你自己的名字（英文）
git config --global user.email "your.email@example.com" #改成你自己的邮箱

3. 安装 Yarn

# 方法一：使用 npm 安装（推荐）
npm install -g yarn

# 或者添加 Yarn 仓库并安装
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
yum install -y yarn

# 验证安装
yarn --version

环境验证

完成基础环境安装后，验证Node.js,npm,git,yarn是否正确配置：

# 验证 Node.js 版本（建议 18.x 或更高版本）
node --version
# 验证 npm 版本
npm --version
# 验证 Git 版本
git --version
# 检查 Git 配置
git config --list
# 验证 Yarn 版本
yarn --version

环境要求说明

• Node.js: 18.x 或更高版本（推荐使用 LTS 版本）
• Git: 2.0 或更高版本
• Yarn: 1.22 或更高版本
• 系统内存: 至少 2GB 可用内存
• 磁盘空间: 至少 1GB 可用空间

如果以上命令都能正常输出版本信息，说明环境配置完成，可以进行下一步的部署操作。

部署步骤

第一步：获取项目代码

mkdir -p ~/projects #家目录下新建projects文件夹
cd ~/projects #切换到该文件夹

# 常规方法，克隆项目到本地
git clone https://gitee.com/KaiyiWing/qwerty-learner.git  # 克隆国内镜像
# git clone https://github.com/RealKai42/qwerty-learner.git # 克隆官方仓库（国外）
# 如果实在不行，由教师提供安装压缩包，上传该qwerty-learner.zip并使用以下命令解压
unzip qwerty-learner.zip

# 进入项目目录
cd qwerty-learner

第二步：安装依赖

# 使用 yarn 安装项目依赖
yarn install

第三步：构建生产版本

# 构建生产版本
yarn build

第四步：关闭防火墙和安全

systemctl stop firewalld
systemctl disable firewalld
setenforce 0

第五步：启动生产服务器

修改 package.json 脚本，改成如下图

{
  "scripts": {
    "start": "vite --host 0.0.0.0", //增加这行
  }
}

# 启动服务器
yarn start
# 或者直接指定端口
# yarn start --host 0.0.0.0

结果如下 虚拟机访问http://localhost:5173 windows访问下面那两个

项目结构

qwerty-learner/
├── build/                 # 构建后的静态文件
├── public/                # 静态资源
├── src/                   # 源代码
│   ├── components/        # React 组件
│   ├── assets/           # 静态资源
│   └── ...               # 其他源码文件
├── package.json          # 项目配置
└── README.md            # 项目说明

功能特性

• 📚 多种词库支持（CET-4/6、TOEFL、GRE、程序员词汇等）
• 🔊 音标显示和发音功能
• ✍️ 默写模式
• 📊 速度和正确率统计
• 🎨 美观的 UI 界面
• 🌐 支持多语言

故障排除

1. 端口被占用

# 查看端口占用
lsof -i :3000

# 杀死进程
kill -9 <PID>

在线访问示例

• 官方部署：https://qwerty.kaiyi.cool/
• GitHub Pages：https://realkai42.github.io/qwerty-learner/
• 官方readme：官方文档