介紹

眾所周知，世界各地的人們使用多種語言。因此，如果我們希望每個人都可以訪問我們的應(yīng)用程序，則有必要使用他們的母語創(chuàng)建它。

國際化是使您的 Web 應(yīng)用程序可供全球更廣泛的用戶訪問、提供更好的用戶體驗的方法之一。如果我們從商業(yè)角度來看，國際化和翻譯有助于加強全球影響力，從而產(chǎn)生更多收入。

那么，讓我們從Vue 國際化示例開始探索國際化。

教程目標(biāo)：使用 Vue l18n 的 Vue 國際化示例

在本教程中，借助Vue 國際化示例，我們將了解 Vue I18n 并探索如何在我們的 VueJS 應(yīng)用程序中實現(xiàn)國際化和翻譯。

項目設(shè)置

首先，我們將使用 Vue CLI 創(chuàng)建一個 VueJS 應(yīng)用程序。

vue 創(chuàng)建 vue 國際化

安裝和設(shè)置 VueI18n

現(xiàn)在，在 Vue CLI 的幫助下，添加我們的翻譯庫 vue-i18n。

cd vue-國際化vue 添加國際化

Vue CLI 自動為我們完成所有必需的設(shè)置。這將創(chuàng)建一個語言環(huán)境文件夾和一個 en.json 文件作為我們的默認語言文件。

//zh.json{
  “歡迎歡迎！”}

在 JSON 文件中存儲 Vue 翻譯

讓我們在印地語和法語翻譯目錄中再創(chuàng)建兩個文件 hi.json 和 fr.json，并將以下代碼添加到相應(yīng)的文件中。

//嗨.json{
  “歡迎”：“????????！”}//fr.json{
  "welcome": "雙會場！"}

打開 App.vue，在我們的應(yīng)用程序中使用上述文件。首先，將 HelloWorld.vue 文件重命名為 HelloI18n.vue?，F(xiàn)在，讓我們按如下方式編輯 App.vue。

// 應(yīng)用程序.vue

<模板>
 <div id="應(yīng)用程序">
   <h1> Vue 國際化應(yīng)用</h1>
   <你好I18n />
 </div></模板>
 

想要開發(fā)可持續(xù)的高性能 VueJS 應(yīng)用程序？
Bacancy 擁有精明的開發(fā)人員，他們具有高超的問題解決能力和高級 VueJs 知識。聯(lián)系我們并為您的夢想項目聘請Vue Js 開發(fā)人員。

在模板中使用 VueI18n

在HelloI18n.vue文件中，刪除所有代碼并為我們的示例添加以下代碼。

// HelloI18n.vue

<模板>
  <分區(qū)>
    <h1>
      {{ $t('language_select_info') }}
    </h1>
    <分區(qū)>
      <select v-model="$i18n.locale">
        <選項
          v-for="(langnguage, i) 語言"
          :key="langnguage"
          :value="langnguage">
          {{ 語言 }}
        </選項>
      </選擇>
    </div>
  </div></模板>

現(xiàn)在，如您所見，我們在模板中使用了 language_select_info。使用此鍵及其對應(yīng)語言的翻譯值編輯所有 JSON 文件，如下所示。

//zh.json"language_select_info": "選擇您要使用的語言"//嗨.json“l(fā)anguage_select_info”: ?????"//fr.json"language_select_info": "Sélectionnez la langue que vous souhaitez utiliser"

將根文件夾中的 i18n.js 文件移動到插件文件夾以獲得更好的結(jié)構(gòu)。

運行應(yīng)用程序。我們將看到英語的language_select_info值。我們還沒有設(shè)置我們的首選項，所以它將采用默認的英語。

現(xiàn)在，打開瀏覽器。它看起來像這樣。

目錄結(jié)構(gòu)

我們可以在 locales 文件夾中為不同的語言提供單獨的 JSON 文件

來源|--語言環(huán)境| |--de.json| |--zh.json| |--嗨.json| |--fr.json

Vue 組件文件中的翻譯

<國際化>
  {
    “恩”：{
      “你好”：“你好世界”
    },
    “FR”：{
      “你好”：“你好世界”
    },
    “你好”： {
      “你好”：“??????????”
    }
  }</i18n>

借助上述語法，我們可以在組件本身中添加特定于組件的翻譯。雖然這對于其他語言環(huán)境文件來說可能看起來是一個不錯的選擇，但對于一些場景來說它并不是一個很好的選擇。它適用于翻譯較少的小型應(yīng)用程序，但隨著應(yīng)用程序開始變得越來越大，我們很快就會遇到類似的問題：

• 我們最終會復(fù)制數(shù)據(jù)。假設(shè)，Hello 文本在許多其他組件中使用，我們將為每個組件單獨編寫相同的翻譯。

• 隨著翻譯消息和語言數(shù)量的增加，組件開始變得越來越大。很快，它就會看起來像一個又大又丑的組件，最終變得難以維護。

• 無法在各種組件之間共享本地翻譯。

我們將為我們的應(yīng)用程序使用 .json 文件，因為它更容易調(diào)試和維護應(yīng)用程序。我們的演示應(yīng)用程序不夠大，但實際應(yīng)用程序會比我們的演示更復(fù)雜。因此，為了更好地理解，我們將采用 .json 文件方式。我們已經(jīng)使用了這兩個示例，以便您可以使用它們。稍后，在教程中，我們將分享 Vue 國際化示例的 github 鏈接，供您進一步探索。

使用瀏覽器的默認語言

由于我們沒有為我們的應(yīng)用程序選擇任何默認語言，因此該應(yīng)用程序?qū)⒉捎脼g覽器的默認語言，即英語。假設(shè)瀏覽器的默認語言不是英語，而您的應(yīng)用程序仍然以英語作為默認語言。在這種情況下，您需要借助“選擇”選項手動更改語言。

該應(yīng)用程序應(yīng)自動檢測瀏覽器的默認語言并將其設(shè)置為更好的用戶體驗。

讓我們努力解決這個問題，看看我們該怎么做。

更新 i18n.js 文件。將 navigator.language（用于檢測默認語言的瀏覽器 API）分配給語言環(huán)境導(dǎo)出變量。瀏覽器的語言通常以默認語言為前綴，如 en-GB 或 en-IN。我們的應(yīng)用程序只需要第一部分，所以我們使用了navigator.language.split('-')[0]：

// 插件/i18n.js導(dǎo)出默認新 VueI18n({
  語言環(huán)境：
    navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE || '恩',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || '恩',
  消息：loadLocaleMessages()})

假設(shè)我們的應(yīng)用程序中有特定于地區(qū)的語言。我們通常遵循命名約定，我們在 en-GB.json 和 en-IN.json 等語言后加上區(qū)域的簡稱。要獲取用戶所在地區(qū)的正確語言，我們需要將以下代碼添加到我們的應(yīng)用程序中。

函數(shù) checkDefaultLanguage() {
  讓匹配=空
  常量語言 = Object.getOwnPropertyNames(loadLocaleMessages())
  languages.forEach（語言=> {
    如果（語言=== navigator.language）{
      匹配 = 語言
    }
  })
  如果（！匹配）{
    languages.forEach（語言=> {
      如果（語言=== navigator.language.split（'-'）[0]）{
        匹配 = 語言
      }
    })
  }
  如果（！匹配）{
    languages.forEach（語言=> {
      如果 (language.split('-')[0] === navigator.language.split('-')[0]) {
        匹配 = 語言
      }
    })
  }
  返回匹配}導(dǎo)出常量 selectedLocale =
  檢查默認語言（）|| process.env.VUE_APP_I18N_LOCALE || '恩'導(dǎo)出常量語言 = Object.getOwnPropertyNames(loadLocaleMessages())導(dǎo)出默認新 VueI18n({
  語言環(huán)境：選擇語言環(huán)境，
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || '恩',
  消息：loadLocaleMessages()})

如您所見，我已經(jīng)拆分了瀏覽器默認語言和我們的 JSON 文件名并最終匹配英文和en-IN，這是顯示荷蘭語的不錯選擇。如您所見，我從文件中導(dǎo)出了一些常量，稍后我將在我們的應(yīng)用程序中使用它們。

堅持語言偏好

讓我們使用我們創(chuàng)建的語言列表將語言更改為印地語。如果您刷新網(wǎng)頁，您可以看到我們的文本被翻譯成印地語。您可以看到翻譯后的印地語消息再次重置為英語！

這沒有任何意義。我們可以改進它。我們必須以某種方式存儲用戶的選擇，并在用戶每次訪問或重新加載頁面時在我們的應(yīng)用程序中使用它。我們可以使用瀏覽器的 localStorage 來保存和獲取它，或者我們可以使用一個插件——vuex-persistedstate，它會自動為我們做同樣的事情

讓我們以 Vuex 的方式來做，因為我們假設(shè)我們使用的是真實世界的應(yīng)用程序。首先，我們需要安裝插件：

npm install --save vuex-persistedstate

//存儲/index.js

從 'vuex' 導(dǎo)入 Vuex從 'vue' 導(dǎo)入 Vue從 '@/plugins/i18n' 導(dǎo)入 i18n, { selectedLocale }從 'vuex-persistedstate' 導(dǎo)入 createPersistedStateVue.use(Vuex)export default new Vuex.Store({
  狀態(tài)： {
    語言環(huán)境：i18n.locale
  },
  突變：{
    updateLocale(state, newLocale) {
      state.locale = newLocale
    }
  },
  行動：{
    changeLocale({ commit }, newValue) {
      // 在 i18n 插件中更新它
      i18n.locale = newValue
      提交（'updateLocale'，newValue）
    }
  },
  插件：[createPersistedState()]})

// 主.js

從“vue”導(dǎo)入 Vue；從“./App.vue”導(dǎo)入應(yīng)用程序；從“./plugins/i18n”導(dǎo)入國際化；從“./store”導(dǎo)入商店；Vue.config.productionTip = false;新的 Vue({
  國際化,
  店鋪，
  渲染：（h）=> h（應(yīng)用程序），}).$mount("#app");

讓我們使用 vuex-persistedstate 來存儲和更新用戶選擇的語言的更改，而不是使用組件中的局部變量。我們的插件會將用戶選擇的語言存儲在 localStorage 中。當(dāng)用戶重新加載或重新打開頁面時，我們的插件將從 localStorage 獲取語言，在應(yīng)用程序中使用它，并在語言選擇下拉列表中設(shè)置它的值。

<模板>
  <div class="lang-dropdown">
    <select v-model="lang">
      <選項
        v-for="(language, i) 語言"
        ：鍵=“語言”
        :value="語言">
        {{ 語言 }}
      </選項>
    </選擇>
  </div></模板>

我們沒有使用組件狀態(tài)中的靜態(tài)語言列表，而是使用了 i18n.js 文件中導(dǎo)出的列表，而不是靜態(tài)語言列表。如果您嘗試重新打開或重新加載任何頁面，將顯示所選語言文本。太棒了！

繼續(xù)翻譯

隨著應(yīng)用程序開始增長，我們的翻譯文件內(nèi)容也變得很大。為了更好地維護代碼，我們需要在語言 JSON 文件中組織我們的翻譯，以提高可讀性。很快我們就會在許多組件中出現(xiàn)重復(fù)的消息、密鑰或短語，如用戶名、密碼、按鈕或提交。

//zh.json{
 “儀表板頁面”：{
    "welcomeMessage": "歡迎來到Vue國際化博客教程",
    "用戶名": "用戶名",
    “登錄”：“登錄”
  },
  “登錄”： {
    "userName": "請輸入您的用戶名",
    "密碼": "輸入您的密碼",
    “登錄”：“登錄”
  },
  “忘記電子郵件”：{
    “電子郵件”：“電子郵件”，
    "continue": "點擊這里恢復(fù)您的郵箱",
    "submit": "點此登錄"
  }}

正如您在上面的示例中看到的，我們有一些重復(fù)的單詞?，F(xiàn)在想象一下，如果我們必須更新任何消息，我們必須在所有出現(xiàn)的地方都這樣做以反映應(yīng)用程序中的所有位置。在大中型應(yīng)用程序中，我們將在每個 JSON 文件中包含數(shù)百條翻譯消息。如果對于一個組件，我們對同一條消息有不同的嵌套對象，它將變得難以跟蹤和調(diào)試。

我們應(yīng)該以某種方式將它們分組并放在一個地方。這樣做我們?nèi)匀粫幸恍┲貜?fù)，但我們通過使用下面顯示的鏈接來克服它們：

//zh.json{
 “儀表板頁面”：{
    "welcomeMessage": "歡迎來到Vue國際化博客教程",
    "用戶名": "用戶名",
    “登錄”：“登錄”
  },
  “登錄”： {
    "userName": "輸入您的@:homepage.userName",
    "密碼": "輸入您的密碼",
    "登錄": "@:homepage.login"
  },
  “忘記電子郵件”：{
    “電子郵件”：“電子郵件”，
    "continue": "點擊此處恢復(fù)@:forgotEmail.email",
    "submit": "點擊此處獲取@:login.login"
  }}

給你，我們做到了！

我們了解了如何在 Vue-i18n 的幫助下在我們的 Vue 應(yīng)用程序中實現(xiàn)國際化。vue -i18n 文檔寫得很好。您將在 Vue 應(yīng)用程序中了解許多其他翻譯概念。我們應(yīng)該考慮這一點。

Github 存儲庫：Vue 國際化示例

請隨意訪問源代碼，使用以下命令克隆存儲庫，然后使用它。

git 克隆 https://github.com/jaydadhaniya/vue-internationalization.git

結(jié)論

（言鼎科技）