需求
首先我们先把需求捋清楚，我们web网页项目中配置了
i18n国际化插件，但我们需要通过设备的系统语言来切换，而这个设备可以是浏览器，也可以是Android的WebView等等，我们可以通过监听languagechange事件，获取navigator.language系统语言来切换i18n。
实现
i18n安装配置
这里i18n的安装以及配置等流程就略过了。官网传送门
准备一个i18n切换函数
const locales:string[] = ["zh-CN", "en-US"]; // 准备一个自己支持的语言列表
export function onSwitchLocale(locale: string) {
// 判断是否支持
if (locale && locales.includes(locale)) {
// 切换i18n语言
i18n.locale = locale;
// 储存本地(根据业务需求)
localStorage.setItem("lang", locale);
return true;
} else {
console.log(`不支持的语言:${ locale }`)
return false;
}
}
注意：
locales这里的字符串不是随意定义的，需要自己通过浏览器切换语言监听打印，按照标准，navigator.language应当返回用户的首选语言和地区的 ISO 639-1 和 ISO 3166-1 标准代码的字符串。因此，在理论上来说，不同的浏览器应该返回相同的国际化标准字符串。但是实际上，仍然存在一些可能会导致
navigator.language返回值差异的情况。例如:
- 有些浏览器将用户选择的语言进行了转换或修改，以匹配浏览器自身支持的语言列表。
- 有些设备（如移动设备）中的浏览器可能只提供了有限的语言选项。在这种情况下，
navigator.language的返回值可能被强制设置为设备支持的语言之一。- 更改浏览器语言时，一些浏览器可能需要重新启动浏览器才能确保新设置生效。
虽然这些情况可能会导致不同浏览器返回略有不同的
navigator.language值，但这种变化通常很小，不会对大多数网站和开发人员产生很大影响，但不排除有，具体可以通过调试解决。
main文件(入口文件)
function switchLocale(){
const language = navigator.language;
onSwitchLocale(language);
}
// 刚进入需要匹配系统语言
switchLocale()
// 监听语言切换
window.addEventListener("languagechange", switchLocale);
刚进入项目，就会匹配浏览器语言设置
i18n，并设置languagechange监听，切换系统语言的同时，i18n也会同时切换。
