{{ $t("message.hello") }}
```
或者，在 JavaScript 中：
```javascript
export default {
created() {
console.log(this.$t('message.hello'));
},
}
```
### 5. 切换语言
你可以通过改变 `i18n.locale` 的值来切换应用的语言。例如，在 Vue 组件中，你可以添加一个按钮来切换语言：
```javascript
export default {
methods: {
changeLanguage() {
this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
}
}
}
```
并在模板中添加按钮：
```html
```
### 总结
这就是在 Vue.js 项目中配置和使用 `vue-i18n` 的基本步骤。`vue-i18n` 提供了丰富的功能，包括复数、上下文、命名插值等，你可以查阅 [vue-i18n 官方文档](https://kazupon.github.io/vue-i18n/) 来了解更多高级用法。
Vue.js 的国际化（i18n）通常通过 `vue-i18n` 这个插件来实现。`vue-i18n` 允许你在 Vue.js 应用中轻松实现多语言支持。下面是如何配置 `vue-i18n` 的基本步骤：
### 1. 安装 vue-i18n
首先，你需要在你的 Vue.js 项目中安装 `vue-i18n`。如果你正在使用 npm，可以通过以下命令来安装：
```bash
npm install vue-i18n
```
或者使用 yarn：
```bash
yarn add vue-i18n
```
### 2. 配置 vue-i18n
在你的 Vue 项目中，通常会在入口文件（如 `main.js` 或 `main.ts`）中配置 `vue-i18n`。
```javascript
import Vue from 'vue';
import VueI18n from 'vue-i18n';
// 引入语言文件
import en from './locales/en.json';
import zh from './locales/zh.json';
// 创建 i18n 实例
Vue.use(VueI18n);
const messages = {
en, // 英文
zh, // 中文
};
const i18n = new VueI18n({
locale: 'en', // 设置地区
messages, // 设置地区信息
});
// 创建和挂载根实例
new Vue({
i18n,
render: h => h(App),
}).$mount('#app');
```
### 3. 定义语言文件
在上面的代码中，我们从 `./locales/en.json` 和 `./locales/zh.json` 引入了语言文件。你需要创建这些文件，并在其中定义你的翻译文本。例如，`en.json` 可能看起来像这样：
```json
{
"message": {
"hello": "Hello world"
}
}
```
而 `zh.json` 可能是：
```json
{
"message": {
"hello": "你好，世界"
}
}
```
### 4. 在组件中使用
一旦配置好 `vue-i18n`，你就可以在 Vue 组件中使用它了。例如，在模板中：
```html