HTML5转APP语言切换失效的主因是WebView未持久化语言偏好，需分别处理Android/iOS存储配置、全局唯一i18n实例、资源路径匹配及系统语言变更桥接。
HTML5转APP时语言切换不生效？先确认运行环境是否支持 document.cookie 或 localStorage
很多开发者发现，在 Cordova、Capacitor 或 WebView 封装的 HTML5 APP 中，i18next 或 vue-i18n 切换语言后刷新页面就回退到默认语言——根本原因常是：WebView 未持久化语言偏好。原生 WebView（尤其 Android 4.4+ 内置 WebKit）默认不启用 cookie 存储，document.cookie 写入失败；iOS WKWebView 则默认禁用 localStorage 的跨会话持久化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Android Cordova：在
config.xml中添加，并在onDeviceReady中调用cordova.plugins.cookies.enable()（需插件cordova-plugin-cookies） - iOS Capacitor：启用
WKWebView的allowsInlineMediaPlayback不相关，关键要确保capacitor.config.ts中server.cleartext = true（仅调试期），并用Preferences.set()替代localStorage存语言 code - 通用兜底：首次启动时检测
navigator.language或navigator.userLanguage，但绝不依赖它作为唯一来源；必须显式写入持久化存储并读取
Vue/React 项目中 i18n 实例被重复创建，导致 $t() 不响应更新
在 HTML5 转 APP 场景下，单页应用常因 WebView reload、热更新或插件重载触发多次 new VueI18n() 或 createI18n()，旧实例残留，新组件仍绑定老实例，$t('key') 返回空或旧翻译。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局只创建一次 i18n 实例：Vue 3 中用
const i18n = createI18n({...})定义在顶层模块（如i18n/index.ts），导出后在main.ts中app.use(i18n)—— 禁止在组件内或路由守卫里重新 new - 切换语言时避免整页 reload：调用
i18n.locale.value = 'zh-CN'（Vue 3 Composition API）或i18n.locale = 'zh-CN'（Options API），而非window.location.reload() - 检查插件冲突：某些 Cordova 插件（如
cordova-plugin-globalization）会覆盖navigator.globalization，干扰 i18n 初始化逻辑，建议弃用，改用纯 JS 检测
资源文件加载失败却无报错？注意 APP 打包路径与 fetch/cdn 加载差异
开发时本地 http-server 下 JSON 语言包能正常 fetch('/locales/zh-CN.json')，打包进 APP 后 404 —— 因为 Cordova 默认把 www/locales/ 当作静态资源，但 Capacitor 的 capacitor.config.ts 中若未配置 webDir，或路径大小写不一致（如代码请求 zh-cn.json，但文件名是 zh-CN.json），就会静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用相对路径 + 显式后缀：语言包命名用小写连字符（
zh-cn.json,en-us.json），加载时拼接完整路径：fetch(`./locales/${lang}.json`) - Capacitor 必须检查
capacitor.config.ts的webDir: 'dist'是否指向构建输出目录；Cordova 则确认config.xml中 - 加错误捕获：i18next 初始化时设置
load: 'currentOnly'并监听failedLoading事件，打印具体lng和ns，避免“黑盒”静默失败
系统语言变更后 APP 不自动同步？别依赖 onlanguagechange，要用原生桥接
浏览器有 window.onlanguagechange，但 WebView 几乎都不支持该事件（Chrome for Android、WKWebView 均未实现）。用户在手机系统设置里切语言，APP 内不会感知，除非手动触发切换或重启。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Android：用
cordova-plugin-app-preferences监听系统语言变化，或通过cordova-plugin-native-bridge调用getResources().getConfiguration().getLocales().get(0).toLanguageTag() - iOS：Capacitor 插件
@capacitor/app提供App.addListener('appStateChange', ...)，配合Device.getLanguageCode()（需@capacitor/device）在 app 进入前台时比对当前语言 - 折中方案：APP 启动时强制读取一次系统语言（
Device.getLanguageCode()），并提供「跟随系统」开关，开关开启时每次进入前台都校验并同步，关闭则以用户上次手动选择为准
多语言不是配好 JSON 就完事，WebView 的存储限制、实例生命周期、资源路径解析、系统事件缺失，每个环节都可能让切换失效。最容易被忽略的是：没验证持久化写入是否真实成功，以及没在 APP 启动阶段做一次主动语言对齐。
