網站搜尋

javascript - 在 Vue i18n 中分別使用數字和訊息本地化


我想在我的網頁應用程式中使用 Vue I18n 來進行貨幣、日期和訊息的本地化。使用者可以分別設定語言和使用的貨幣格式。例如:一個德國使用者希望網站是英文本地化,但貨幣格式應該是 EUR 並且使用 'de-DE'。

有可能用 Vue I18n 來建立這個嗎?像是為貨幣設立一個獨立的語系設定?

我可以在模板中傳遞 BCP 47 語言代碼,但那樣我就必須為每個組件加載當前配置的語言代碼。我希望能以更動態的方式解決這個問題。

<p>{{ $n(price, 'currency', currentLanguageCode) }}</p>
const numberFormats = {
    'en-US': {
        currency: {
            style: 'currency', currency: 'USD'
        }
    },
    'de-DE': {
        currency: {
            style: 'currency', currency: 'EUR'
        }
    },
    'de-CH': {
        currency: {
            style: 'currency', currency: 'CHF'
        }
    }
}

const i18n = new VueI18n({
    numberFormats,
    messages: {
        en: {
            test: 'test message'
        },
        de: {
            test: 'Testnachricht'
        }
    },
    locale: 'de',
    fallbackLocale: 'de'
})