本文详解如何为前端项目中的 typo-js 库正确加载 Hunspell 格式的 .aff 和 .dic 词典文件，包括词典获取、目录结构配置与实例化调用，确保拼写检查与建议功能正常工作。
本文详解如何为前端项目中的 typo-js 库正确加载 hunspell 格式的 `.aff` 和 `.dic` 词典文件，包括词典获取、目录结构配置与实例化调用，确保拼写检查与建议功能正常工作。
typo-js 是一个轻量级、纯 JavaScript 实现的拼写检查库，支持基于 Hunspell 标准的词典（即 .aff + .dic 文件组合），可为搜索框等场景提供拼写容错与纠错建议能力。但其对词典路径有严格约定，需手动准备并按规范部署文件。
✅ 步骤一：获取 Hunspell 词典文件
Hunspell 词典由两部分组成：
- xxx.aff：定义词形变化规则（如复数、时态等）；
- xxx.dic：包含基础词汇表（首行为单词总数，后续每行一个词）。
推荐从 NPM 社区获取标准化词典包，例如：
- 英式英语：dictionary-en-gb
- 美式英语：dictionary-en-us
- 其他语言可在 npm dictionary-* 中查找。
安装后，从 node_modules/dictionary-en-gb/ 中提取 en-gb.aff 和 en-gb.dic 文件（或直接通过 unpkg 下载原始文件）。
✅ 步骤二：正确部署词典路径
typo-js 默认按固定路径加载词典：
[settings.dictionaryPath]/dictionaries/[lang]/[lang].aff [settings.dictionaryPath]/dictionaries/[lang]/[lang].dic
因此，需将文件放入项目静态资源目录中，例如：
public/assets/dictionaries/en-gb/en-gb.aff public/assets/dictionaries/en-gb/en-gb.dic
⚠️ 注意：路径必须可通过 HTTP 直接访问（如开发服务器下 http://localhost:3000/assets/dictionaries/en-gb/en-gb.aff 可返回文件内容），否则会因 CORS 或 404 报错。
✅ 步骤三：初始化 Typo 实例并使用
import Typo from 'typo-js';
// 指向词典根目录（不含 dictionaries 子路径）
const dict = new Typo('en-gb', null, null, {
dictionaryPath: '/assets' // 对应 public/assets/
});
console.log(dict.check('corour')); // false
console.log(dict.suggest('corour')); // ['colour', 'croup', 'courier', ...]
⚠️ 常见问题排查
- 404 错误？ 打开浏览器开发者工具 → Network 标签页，观察 typo-js 实际请求的 URL（如 /assets/dictionaries/en-gb/en-gb.aff），确认文件是否真实存在且路径匹配。
- 解析失败？ 确保 .dic 文件首行是纯数字（单词总数），且无 BOM 或 UTF-8 编码问题；.aff 文件也需 UTF-8 无 BOM。
- 多语言支持？ 可同时初始化多个 Typo 实例（如 new Typo('zh-cn')），但需对应中文 Hunspell 词典（注意：中文词典较罕见，通常需自行构建或选用分词方案替代）。
通过以上配置，typo-js 即可稳定提供拼写校验与智能建议能力，显著提升搜索体验的健壮性与用户友好度。
