Vue.js 的国际化（i18n）通常通过 vue-i18n 这个插件来实现。vue-i18n 允许你在 Vue.js 应用中轻松实现多语言支持。下面是如何配置 vue-i18n 的基本步骤：

1. 安装 vue-i18n

首先，你需要在你的 Vue.js 项目中安装 vue-i18n。如果你正在使用 npm，可以通过以下命令来安装：

npm install vue-i18n

或者使用 yarn：

yarn add vue-i18n

2. 配置 vue-i18n

在你的 Vue 项目中，通常会在入口文件（如 main.js 或 main.ts）中配置 vue-i18n。

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 可能看起来像这样：

{
  "message": {
    "hello": "Hello world"
  }
}

而 zh.json 可能是：

{
  "message": {
    "hello": "你好，世界"
  }
}

4. 在组件中使用

一旦配置好 vue-i18n，你就可以在 Vue 组件中使用它了。例如，在模板中：

<template>
  <div>{{ $t("message.hello") }}</div>
</template>

或者，在 JavaScript 中：

export default {
  created() {
    console.log(this.$t('message.hello'));
  },
}

5. 切换语言

你可以通过改变 i18n.locale 的值来切换应用的语言。例如，在 Vue 组件中，你可以添加一个按钮来切换语言：

export default {
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    }
  }
}

并在模板中添加按钮：

<button @click="changeLanguage">切换语言</button>

总结

这就是在 Vue.js 项目中配置和使用 vue-i18n 的基本步骤。vue-i18n 提供了丰富的功能，包括复数、上下文、命名插值等，你可以查阅 vue-i18n 官方文档 来了解更多高级用法。