如何在VUE應用程序中實施國際化（I18N）和本地化（L10N）？

VUE應用程序中的國際化和本地化主要使用VUE I18N插件來處理。 1。通過NPM或紗線安裝VUE-I18N。 2。創建Locale JSON文件（例如，EN.JSON，ES.JSON）以獲取翻譯消息。 3。在Main.js中設置I18N實例，並具有語言環境配置和消息文件。 4。使用$ t（'鍵'）中的模板中的訪問翻譯。 5。始終如一地管理翻譯鍵，並避免深嵌套以進行可擴展性。 6。通過在運行時更新語言環境屬性來動態切換語言。 7。在本地存儲中堅持選擇的語言，以保留用戶偏好。 8。在翻譯中使用動態值，帶有變量注入，例如$ t（'Hellouser'，{name：'alice'}）。 9。在I18N配置中實現複數化規則，並使用$ TC（）進行適當的複數處理。 10。對於諸如RTL支持或日期格式之類的高級需求，請集成INTL或Date-FN等庫，以確保完整的本地化覆蓋範圍。

VUE應用中的國際化（I18N）和本地化（L10N）主要歸結為兩件事：根據用戶的語言偏好切換內容，並確保正確顯示文本，日期，數字和其他特定於網站的特定元素。最常見和最有力的方法是使用專為VUE應用程序構建的VUE I18N 。

設置Vue I18N

要開始，請通過NPM或紗線安裝vue-i18n ：

 NPM安裝VUE-I18N@9

安裝後，創建一個語言環境消息文件（例如en.json ， es.json等），並在您的應用程序輸入點（ main.js或類似）中設置I18N實例：

從'vue'導入{createApp}
從'vue-i18n'導入{createi18n}
從'./app.vue'導入應用程序
從'./locales/en.json'導入en
從'./locales/es.json'導入ES

const i18n = createi18n（{
  遺產：錯誤，
  語言環境：'en'，
  後備名冊：“ en”，
  消息：{
    en，
    es
  }
}））

createApp（app）.use（i18n）.mount（'＃app'）

現在，您可以使用$t('key')訪問模板中任何地方的翻譯。

有效地管理翻譯文件

與其將硬編碼字符串直接分為組件，不如將它們保存在結構化的JSON文件中，例如：

en.json

 {
  “歡迎”：“歡迎！”，
  “按鈕”： {
    “提交”：“提交”
  }
}

ES.JSON

 {
  “歡迎”：“âbienvenido！”，
  “按鈕”： {
    “提交”：“ Enviar”
  }
}

這使得隨著應用程序的增長而更容易維護和擴展。您還可以使用Poeditor或Crowdin等工具來幫助管理翻譯，如果使用多種語言或團隊。

一些提示：

• 保持鑰匙在整個環境之間保持一致。
• 除非有必要，否則避免嵌套的結構深處 - 它們可能會變得凌亂。
• 如果您的團隊包括非開發人員，請在單獨的文件或工具中使用註釋。

動態切換語言

在運行時更改應用程序的語言很簡單。只需更新I18N實例上的locale屬性：

導入{usei18n}來自'vue-i18n'

導出默認{
  設定() {
    const {locale} = usei18n（）

    功能changelang（newlang）{
      locale.value = newlang
    }

    返回{locale，changelang}
  }
}

在您的模板中：

 <button @click =“ changelang（&#39;es&#39;）”>español</button>

這將立即切換您的應用程序中的所有本地化文本。您還可以在本地存儲中持續使用所選語言，因此用戶不必每次訪問時都切換。

處理動態和多元化內容

有時，您需要將變量注入翻譯字符串或處理複數化。 VUE I18N支持這兩者：

使用動態值：

在您的JSON中：

 “ hellouser”：“你好，{name}！”

在您的組件中：

 <p> {{$ t（&#39;hellouser&#39;，{name：&#39;alice&#39;}）}}} </p>

多元化：

在您的I18N配置中設置複數規則：

 const i18n = createi18n（{
  遺產：錯誤，
  語言環境：'en'，
  後備名冊：“ en”，
  複數：{
    en ：（選擇，選擇）=> {
      if（choiceslength === 2）{
        返回選擇> 1？ 1：0
      }
      返回選擇？ 1：0
    }
  }，，
  消息：{
    en，
    es
  }
}））

然後在您的JSON中：

 “ tookeSelected”：“您選擇{count} item |您選擇{count}項目”

在您的模板中：

態

這有助於使您的UI在復數規則不同的不同語言中感到自然。

這基本上就是I18N和L10N在VUE工作的方式。一旦建立了結構，它就不會太複雜，但是很容易忽略某些邊緣案例，例如RTL語言，日期格式或貨幣處理。對於這些，請研究與諸如date-fns或Intl類的庫集成。但是對於大多數標準需求，VUE I18N涵蓋了它。

以上是如何在VUE應用程序中實施國際化（I18N）和本地化（L10N）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！