Cara melaksanakan fungsi pengantarabangsaan dalam projek Vue

Cara melaksanakan fungsi antarabangsa dalam projek Vue

Dengan perkembangan Internet dan gelombang globalisasi, semakin banyak projek perlu menyokong fungsi berbilang bahasa untuk memenuhi keperluan pengguna yang berbeza untuk perkhidmatan antarabangsa. Dalam projek Vue, fungsi pengantarabangsaan boleh dilaksanakan dengan mudah dengan menggunakan perpustakaan vue-i18n. Artikel ini akan memperkenalkan cara melaksanakan fungsi pengantarabangsaan dalam projek Vue dan menyediakan contoh kod khusus.

Langkah 1: Pasang perpustakaan vue-i18n
Mula-mula, buka terminal dalam direktori akar projek Vue dan laksanakan arahan berikut untuk memasang perpustakaan vue-i18n:

npm install vue-i18n

Langkah 2: Buat fail bahasa
Buat a lang dalam Direktori direktori src untuk menyimpan fail bahasa. Buat dua fail, zh.js dan en.js, dalam direktori lang untuk menyimpan pasangan nilai kunci bahasa Cina dan Inggeris masing-masing. Kandungan fail

zh.js adalah seperti berikut:

export default {
  hello: '你好',
  world: '世界',
  greeting: '欢迎',
  ...
}

en.js kandungan fail adalah seperti berikut:

export default {
  hello: 'Hello',
  world: 'World',
  greeting: 'Welcome',
  ...
}

Langkah 3: Buat contoh vue-i18n
Buat folder lang dalam direktori src dan buat index.js fail. Kod khusus adalah seperti berikut ：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

const messages = {
  zh,
  en
}

const i18n = new VueI18n({
  locale: 'en',  // 设置默认语言为英文
  messages
})

export default i18n

Langkah 4: Gunakan fungsi pengantarabangsaan dalam komponen utama
Perkenalkan contoh vue-i18n dalam komponen utama, dan gunakan kaedah $t dalam templat untuk mendapatkan teks pengantarabangsaan yang sepadan. $t方法来获取相应的国际化文本。

<template>
  <div>
    <h1 id="t-hello">{{$t('hello')}}</h1>
    <p>{{$t('world')}}</p>
    <p>{{$t('greeting')}}</p>
  </div>
</template>

<script>
import i18n from '../lang'

export default {
  name: 'App',
  i18n
}
</script>

步骤五：切换语言
在其他组件中，我们可以通过$i18n.locale

<template>
  <div>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>

<script>
import i18n from '../lang'

export default {
  name: 'LanguageSelector',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  },
  i18n
}
</script>

Langkah 5: Tukar bahasa

Dalam komponen lain, kita boleh menukar bahasa melalui $i18n.locale Kod khusus adalah seperti berikut:

rrreee

Dengan mengklik butang, kita boleh bertukar antara. Antara muka Cina dan Inggeris.

🎜Di atas ialah langkah terperinci dan contoh kod untuk melaksanakan fungsi pengantarabangsaan dalam projek Vue. Melalui perpustakaan vue-i18n, kami boleh melaksanakan sokongan berbilang bahasa dengan mudah dan meningkatkan pengalaman pengguna projek. Saya harap artikel ini dapat membantu anda mempelajari dan menggunakan fungsi pengantarabangsaan projek Vue. 🎜

Atas ialah kandungan terperinci Cara melaksanakan fungsi pengantarabangsaan dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!