隨著互聯網的普及和全球化的發展，開發國際化的應用程序已經成為一種趨勢。因此，將 VUE 應用程序國際化是非常有必要的。

以下是 VUE 使用國際化的幾個原因：

• 📒支持多語言：當應用程序需要支持多種語言時，使用國際化可以輕松地添加和維護不同語言的翻譯文件。

• 📒提升用戶體驗：使用用戶習慣的語言可以提高用戶體驗和滿意度。此外，通過翻譯用戶界面文本，可以更好地傳達應用程序的功能和意圖。

• 📒擴展業務范圍：使用國際化可以方便地將應用程序推廣到全球市場，使應用程序更具有競爭力。

• 📒簡化開發流程：使用國際化可以分離應用程序的代碼和文本，使文本翻譯和應用程序功能的修改分離，簡化開發流程，提高開發效率。

🍁i18n組件安裝

安裝 vue-i18n 庫。可以使用 npm 或 yarn 進行安裝：

npm install vue-i18n

或

yarn add vue-i18n

🍁項目中配置 vue-i18n

1. 在您的項目中創建一個名為 locales 的文件夾，用于存放不同語言的翻譯文件。
2. 在 locales 文件夾中創建一個 JSON 文件，例如 en.json，作為英文翻譯的文件。

// en.json
{"message": "Hello, World!"
}

類似地，您可以創建其他語言的翻譯文件（例如 zh.json，作為中文翻譯的文件）。

3. 在 Vue.js 項目中配置 vue-i18n

在 Vue.js 的入口文件(main.js或app.js)中引入 vue-i18n 庫并進行配置。首先需要定義一個 VueI18n 實例，定義語言包（messages），并將其掛載到 Vue 實例上。

// i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';Vue.use(VueI18n);export default new VueI18n({locale: 'en', // 默認語言fallbackLocale: 'en', // 如果當前語言文件不存在，回退到的語言messages: {en: require('./locales/en.json'), // 導入英文翻譯文件zh: require('./locales/zh.json'), // 導入中文翻譯文件},
});

在上述代碼中，使用 Vue.use(VueI18n) 安裝 vue-i18n 插件，定義了一個 VueI18n 實例，并將其掛載到 Vue 實例上。同時定義了語言包（messages），包含了 zh 和 en 兩種語言標識下的語言內容。

🍁編寫語言包

在項目的根目錄下，可以新建一個 lang 目錄，在該目錄下根據語言標識 (zh、en等) 創建對應的語言包文件，例如：

// lang/zh.js
module.exports = {message: {greeting: '你好，世界'}
};// lang/en.js
module.exports = {message: {greeting: 'Hello, world'}
};

在上述代碼中，定義了 zh 和 en 兩種語言標識下的語言內容，message 對象中存放的是具體的語言字符串。

🍁國際化的使用

1. 主 Vue 組件中導入和使用 i18n 對象。

// App.vue
<template><div id="app"><p>{{ $t('message') }}</p></div>
</template><script>
import i18n from './i18n';export default {name: 'App',i18n, // 導入并使用 i18n 對象
};
</script>

$t 是 vue-i18n 提供的翻譯函數，可以用于在模板中顯示翻譯文本。

2. 頁面代碼中，可以使用 $t 函數來訪問翻譯文本。

例如，在按鈕文本中使用翻譯：

<template><button>{{ $t('buttonText') }}</button>
</template><script>
export default {name: 'MyComponent',
};
</script>

然后在翻譯文件中定義 buttonText 的翻譯文本。

---

🏫博客主頁：魔王-T

🥝大鵬一日同風起 扶搖直上九萬里

??感謝大家點贊👍收藏?評論??

---