vue項目中怎么實現支持多種語言

這篇文章給大家介紹vue項目中怎么實現支持多種語言，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先咱們不妨把網頁中需要轉換語言的公共部分提取出來，放到一個對象中，代碼如下：

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

從上面的代碼中可以看出，hello是一個公眾變量，在中文網站中顯示為“世界”，在英文網站中為“world hello”。然后通過對象的屬性來區分中英文，然后將這個對象加載到全局。如何加載到全局呢，在Vue的項目中，就需要用到Vue-i18n這個模塊。代碼如下：

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>

打印結果為世界，因為在創建vue-i18n實例的過程中我們傳入了兩個參數，local和messages。local標識用哪國語言，local傳入的是zh，messages包含著自定義的語言模塊。如果local出傳入的是en那打印的結果就會變成world hello。

然后在實例化組件的過程中將i18n傳入，這樣組件中就可以訪問$t這個函數了，通過這個函數，我們可以取出messages中的屬性值，將其渲染到頁面中。

核心是在實例化的過程中通過local這個參數來實現實現語言的切換，message來實現語言包的加載，開發者只需將需要翻譯的公共部分抽離出來放到message中即可。

關于vue項目中怎么實現支持多種語言就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。