面试题：如何使用 Vue 开发多语言项目？

在 Vue 项目中实现多语言支持（国际化，i18n）通常使用 Vue I18n 插件。

Vue I18n 是 Vue.js 的官方国际化插件，支持动态切换语言、格式化日期、数字等功能。

以下是使用 Vue I18n 开发多语言项目的详细步骤：

1. 安装 Vue I18n

首先，安装 vue-i18n 插件。

npm install vue-i18n

2. 配置 Vue I18n

在项目中配置 Vue I18n，定义多语言内容和语言切换逻辑。

2.1 创建语言文件

创建多个语言文件，例如：

en.json（英语）
zh.json（中文）

en.json：

{
  "welcome": "Welcome",
  "about": "About Us",
  "contact": "Contact"
}

zh.json：

{
  "welcome": "欢迎",
  "about": "关于我们",
  "contact": "联系我们"
}

2.2 配置 Vue I18n

在 src 目录下创建一个 i18n.js 文件，配置 Vue I18n。

import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import zh from './locales/zh.json';

const messages = {
  en,
  zh,
};

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages, // 语言包
});

export default i18n;

2.3 在 Vue 项目中引入 Vue I18n

在 main.js 中引入并挂载 Vue I18n。

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

3. 在组件中使用多语言

在组件中使用 $t 方法或 <i18n> 标签来显示多语言内容。

3.1 使用 `$t` 方法

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('about') }}</p>
    <p>{{ $t('contact') }}</p>
  </div>
</template>

3.2 使用 `<i18n>` 标签

<template>
  <div>
    <h1><i18n path="welcome" /></h1>
    <p><i18n path="about" /></p>
    <p><i18n path="contact" /></p>
  </div>
</template>

4. 动态切换语言

通过修改 locale 属性，可以动态切换语言。

4.1 添加语言切换按钮

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang; // 切换语言
    },
  },
};
</script>

4.2 保存用户语言偏好

可以将用户选择的语言保存到 localStorage 或 Cookie 中，以便下次访问时自动加载。

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang;
    localStorage.setItem('userLanguage', lang); // 保存到 localStorage
  },
},
mounted() {
  const userLanguage = localStorage.getItem('userLanguage') || 'en';
  this.$i18n.locale = userLanguage; // 加载用户语言偏好
},

5. 高级功能

5.1 格式化日期和数字

Vue I18n 支持日期和数字的格式化。

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages,
  datetimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      },
    },
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      },
    },
  },
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: 'USD',
      },
    },
    zh: {
      currency: {
        style: 'currency',
        currency: 'CNY',
      },
    },
  },
});

在组件中使用：

<template>
  <div>
    <p>{{ $d(new Date(), 'short') }}</p> <!-- 格式化日期 -->
    <p>{{ $n(1000, 'currency') }}</p> <!-- 格式化数字 -->
  </div>
</template>

5.2 复数化和插值

Vue I18n 支持复数化和插值功能。

语言文件：

{
  "apple": "no apples | one apple | {count} apples"
}

组件中使用：

<template>
  <div>
    <p>{{ $tc('apple', 0) }}</p> <!-- no apples -->
    <p>{{ $tc('apple', 1) }}</p> <!-- one apple -->
    <p>{{ $tc('apple', 5) }}</p> <!-- 5 apples -->
  </div>
</template>

6. 总结

Vue I18n 是 Vue.js 的官方国际化插件，支持多语言、日期和数字格式化等功能。
实现步骤：
1. 安装 vue-i18n。
2. 配置语言文件和 Vue I18n。
3. 在组件中使用 $t 或 <i18n> 显示多语言内容。
4. 动态切换语言并保存用户偏好。
高级功能：
- 格式化日期和数字。
- 复数化和插值。