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），就会静默失败。
