Bagaimana untuk menggunakan Vue untuk mencapai pelbagai bahasa dan pengantarabangsaan?

Dengan perkembangan globalisasi, pelbagai bahasa dan pengantarabangsaan semakin menjadi salah satu fungsi yang diperlukan bagi sesebuah laman web atau aplikasi. Sebagai rangka kerja bahagian hadapan yang popular, Vue juga mempunyai penyelesaian yang fleksibel dalam hal ini. Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencapai pelbagai bahasa dan pengantarabangsaan.

1. Pasang Vue-i18n

Vue-i18n ialah pemalam pengantarabangsaan untuk Vue.js yang boleh membantu kami mencapai pelbagai bahasa dan pengantarabangsaan. Mula-mula anda perlu memasang Vue-i18n dalam projek.

npm install vue-i18n --save

2. Cipta fail bahasa

Buat folder i18n dalam projek untuk menyimpan fail bahasa.

Buat fail bernama index.js dalam folder i18n untuk mengkonfigurasi Vue-i18n.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

Dalam kod di atas, locale menunjukkan bahasa yang sedang digunakan dan bahasa Inggeris digunakan secara lalai. mesej mewakili fail bahasa yang digunakan, di mana en.json (Bahasa Inggeris) dan zh.json (Bahasa Cina) diperkenalkan masing-masing.

Anda kini boleh membuat fail en.json dan zh.json dalam folder i18n dan menulis kandungan bahasa.

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3 Menggunakan Vue-i18n

Menggunakan Vue-i18n dalam komponen adalah sangat mudah, cuma tambah $tc (terjemahan) atau $t (pemformatan) pada templat Itu sahaja. .

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

Dalam kod di atas, kedua-dua $t dan $tc boleh digunakan untuk terjemahan Perbezaannya ialah $t boleh diformat dan $tc boleh dijamak mengikut parameter. Ia juga menunjukkan penggunaan kaedah $t dalam atribut yang dikira dan pengubahsuaian bahasa dalam kitaran hayat yang dicipta komponen.

4. Gunakan pemalam Vue CLI

Vue CLI menyediakan pemalam rasmi vue-cli-plugin-i18n, yang boleh menyepadukan berbilang bahasa dan pengantarabangsaan dengan cepat.

Anda perlu memasang pemalam terlebih dahulu.

vue add i18n

Selepas pemasangan berjaya, folder tempat akan dijana dalam projek untuk menyimpan fail bahasa.

Ubah suai fail src/i18n.js.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

Dalam kod di atas, fungsi loadLocaleMessages digunakan untuk memuatkan fail bahasa secara automatik dalam folder locales dan mengembalikan objek mesej. Selain itu, bahasa lalai dan bahasa sandaran boleh ditetapkan melalui pembolehubah persekitaran VUE_APP_I18N_LOCALE dan VUE_APP_I18N_FALLBACK_LOCALE.

Gunakan kaedah $te dalam komponen untuk menentukan sama ada nilai kunci wujud dan kaedah $d untuk memformat tarikh.

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

Di atas adalah kaedah asas menggunakan Vue untuk mencapai pelbagai bahasa dan pengantarabangsaan. Melalui pemalam Vue-i18n atau pemalam Vue CLI, anda boleh melaksanakan fungsi berbilang bahasa dan pengantarabangsaan dengan mudah, menjadikan tapak web atau aplikasi lebih selaras dengan aliran globalisasi.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk mencapai pelbagai bahasa dan pengantarabangsaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!