如何在 vue 应用程序中保持本地化？

Question

我正在尝试使用 vue-i18n 构建多语言 Vue 应用程序，我想知道如何保留所选语言？有人有本地化经验吗？是否可以通过将语言作为参数添加到 vue 路由器？或者还有其他方法吗？

Answer 1

每次您 change/set 您需要将其值存储在 localStorage 中的语言环境。将此添加到您的应用程序：

watch: {
    '$i18n.locale': function(newVal, oldVal) {
        localStorage.setItem('last-locale', newVal)
     }
}

然后在i18n.js初始化文件中读取启动时的这个值：

export default createI18n({
  ...
  locale: getStartingLocale(),
  ...
})

并且只需添加一个函数：

function getStartingLocale() {
    if (localStorage.getItem('last-locale')) {
        return localStorage.getItem('last-locale')
    }
    return process.env.VUE_APP_I18N_LOCALE || "en"
}

如何在 vue 应用程序中保持本地化？

How to persist localisation in a vue app?

vue-i18n

vuejs3