i18next 动态切换语言需确保组件用 useTranslation 包裹、init 时设 useSuspense: false、i18next.init() 在 render 前执行，且语言包路径与 loadPath 严格匹配。
怎么用 i18n 库动态切换语言（React + i18next）
React 项目里加多语言，i18next 是最稳的选择，但直接调 i18next.changeLanguage() 不一定立刻刷新界面——组件得用 useTranslation 或 withTranslation 包一层才响应变化。
常见错误是：改了语言后文字没变，其实是组件没重渲染，或者 init 时没开 react: { useSuspense: false }，导致异步加载资源卡住 UI。
-
i18next.init()必须在ReactDOM.render()前完成，否则首次渲染可能 fallback 到默认语言 - 语言包 JSON 文件路径要和
loadPath配置严格一致，比如locales/{{lng}}/{{ns}}.json，少个斜杠就 404 - 切换语言后，如果用了
useMemo缓存翻译结果，记得把t函数或lng加进依赖数组
Vue 3 的 composition-api 怎么安全读取当前语言
别直接读 i18n.locale.value——Vue 3 + i18n 4.x 后，locale 是个 Ref，但它的变化不会自动触发 computed 重算，除非你显式监听。
更可靠的方式是用 useI18n() 返回的 t 和 locale，它们自带响应性；手动监听要用 watch(() => i18n.locale.value, ...)，而不是监听对象本身。
- 如果在
setup()外访问i18n.locale，会拿不到响应式引用，变成静态值 - SSR 场景下，服务端和客户端 locale 可能不一致，需在
onMounted里校验并同步一次 -
fallbackLng设为false时，缺语言包会静默回退到 key 本身，容易误以为“翻译生效了”
后端返回文案怎么和前端 i18n 对齐（JSON 结构陷阱）
后端传来的文案字段名如果叫 title_zh、title_en，前端就等于放弃 i18n 生态——没法复用插件、无法做缺失检测、热更新也难做。
正确做法是让后端只传 key（如 "article.title"），前端用 t('article.title') 查。如果必须由后端拼好文案，至少约定统一用 message 字段 + lang 标识，且语言码必须和前端 lng 完全一致（zh-CN ≠ zh）。
- 前后端语言码不一致会导致 key 找不到，
t()直接返回 key 字符串，看着像“翻译成功”实则漏翻 - 嵌套 key 如
user.profile.name，后端若扁平化成user_profile_name，前端就得写映射逻辑，维护成本飙升 - 带参数的文案（如
"Hello {{name}}"）必须前后端模板语法统一，i18next默认用双大括号，别改成${name}
怎么避免翻译文本撑破 UI（CSS + i18n 协同要点）
德语单词平均比英语长 30%，日语虽然字符少但字体高度不同，硬写 width: 200px 保不住布局。不是靠“多留点空”这种经验主义，而是从 CSS 层面预留弹性。
关键不是限制宽度，而是控制换行和截断行为：按钮文字用 white-space: normal，配合 min-width；长标题用 text-overflow: ellipsis 但得确保容器有 overflow: hidden 和固定宽高。
- 用
max-width+fit-content比固定width更适应多语言长度波动 - RTL 语言（如阿拉伯语）需要额外加
dir="auto"或direction: rtl，否则图标和文字顺序错乱 - 字体加载未完成时，中文可能先显示英文 fallback 字体，造成高度跳变，建议用
@font-face的font-display: swap
语言切换不是改个变量就完事，真正麻烦的是边界场景：缓存里的旧语言数据、服务端渲染的残留、第三方组件没接入 i18n、还有那些藏在 SVG title 里的硬编码字符串——它们不会因为你切了语言就自动更新。
