Menggunakan Vue-i18n, bagaimana saya tidak boleh memaparkan apa-apa sehingga mesej dimuatkan secara dinamik?

Question

Dalam aplikasi Vue kami, kami memuatkan terjemahan secara dinamik. Rentetan kami akan muncul sebagai kod/ungkapan sebelum ia tiba dari pelayan.

Adakah terdapat cara untuk memberitahu Vue-i18n kepada lalai kepada kosong jika tiada mesej dimuatkan? Atau bolehkah saya mengatasi sesuatu untuk mengembalikan rentetan kosong?

Answer 1

Anda boleh mencapai ini dengan menggunakan atribut VueI18n 初始化中添加 fallbackLocale.

Seperti dalam demo di bawah, locale ja 不可用，因此，它加载 fallbackLocale (Saya menambah rentetan kosong pada semua sifat locale lalai).

Demo Langsung:

const messages = {
  en: {
    message: {
      tokyo: 'Tokyo',
      newyork: 'New York',
      london: 'London'
    }
  },
  default: {
    message: {
      tokyo: '',
      newyork: '',
      london: ''
    }
  }
}
const i18n = new VueI18n({
  locale: 'ja',
  fallbackLocale: 'default',
  messages,
})
new Vue({
  i18n,
  data: {cities: ['tokyo', 'newyork', 'london']}
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.14.1/vue-i18n.min.js"></script>
<div id="app">
  <ul>
    <li
      v-for="city in cities"
      :key="city">
      {{city}}: {{ $t("message." + city) }}
    </li>
  </ul>
</div>