vue項(xiàng)目中怎么實(shí)現(xiàn)支持多種語(yǔ)言

這篇文章給大家介紹vue項(xiàng)目中怎么實(shí)現(xiàn)支持多種語(yǔ)言，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

首先咱們不妨把網(wǎng)頁(yè)中需要轉(zhuǎn)換語(yǔ)言的公共部分提取出來(lái)，放到一個(gè)對(duì)象中，代碼如下：

const messages = {
 en: {
  message: {
   hello: 'world hello'
  }
 },
 zh: {
  message: {
   hello: '世界'
  }
 }
}

從上面的代碼中可以看出，hello是一個(gè)公眾變量，在中文網(wǎng)站中顯示為“世界”，在英文網(wǎng)站中為“world hello”。然后通過(guò)對(duì)象的屬性來(lái)區(qū)分中英文，然后將這個(gè)對(duì)象加載到全局。如何加載到全局呢，在Vue的項(xiàng)目中，就需要用到Vue-i18n這個(gè)模塊。代碼如下：

main.js

import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'
const messages = {
 en: {
  message: {
   hello: 'world hello'
  }
 },
 zh: {
  message: {
   hello: '世界'
  }
 }
}
Vue.use(VueI18n)
const i18n = new VueI18n({
 locale: 'zh',
 messages
})
new Vue({
  i18n,
  template: '<App/>',
  components: { App },
}).$mount('#app')

  App.vue源碼：

<template>
  <h2>{{$t("message.hello")}}</h2>
</template>
<script>
export default {
  created () {
    console.log(this.$t("message.hello"))
  }
}
</script>
<style>
</style>

打印結(jié)果為世界，因?yàn)樵趧?chuàng)建vue-i18n實(shí)例的過(guò)程中我們傳入了兩個(gè)參數(shù)，local和messages。local標(biāo)識(shí)用哪國(guó)語(yǔ)言，local傳入的是zh，messages包含著自定義的語(yǔ)言模塊。如果local出傳入的是en那打印的結(jié)果就會(huì)變成world hello。

然后在實(shí)例化組件的過(guò)程中將i18n傳入，這樣組件中就可以訪問(wèn)$t這個(gè)函數(shù)了，通過(guò)這個(gè)函數(shù)，我們可以取出messages中的屬性值，將其渲染到頁(yè)面中。

核心是在實(shí)例化的過(guò)程中通過(guò)local這個(gè)參數(shù)來(lái)實(shí)現(xiàn)實(shí)現(xiàn)語(yǔ)言的切換，message來(lái)實(shí)現(xiàn)語(yǔ)言包的加載，開(kāi)發(fā)者只需將需要翻譯的公共部分抽離出來(lái)放到message中即可。

關(guān)于vue項(xiàng)目中怎么實(shí)現(xiàn)支持多種語(yǔ)言就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。