VUE2如何支持国际化

VUE2支持国际化

Vue 2 中实现国际化（i18n）通常采用第三方库 vue-i18n。以下是详细的步骤：

1. 安装 vue-i18n

确保已安装 Vue CLI 并创建了一个 Vue 2 项目。然后在项目根目录下使用以下命令安装 vue-i18n：

npm install vue-i18n@^8.x --save

这里使用 vue-i18n@^8.x 版本是因为这是与 Vue 2 兼容的最新版本。

2. 配置 vue-i18n

在项目中创建一个 i18n 目录（如 src/i18n），并在该目录下创建两个（或更多，取决于支持的语言数量）JSON 文件来存储不同语言的翻译内容。例如：

• • en.json（英文）

{
  "hello": "Hello, world!",
  "greeting": "Welcome to our application!"
}

• • zh.json（简体中文）

{
  "hello": "你好，世界！",
  "greeting": "欢迎来到我们的应用！"
}

接下来，在项目的主入口文件（如 src/main.js 或 src/boot/i18n.js，取决于项目的组织结构）中配置 vue-i18n：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: require('./i18n/en.json'),
  zh: require('./i18n/zh.json')
};

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

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

这里设置了默认语言为 en，并将其作为回退语言。messages 对象包含了所有支持语言及其对应的翻译内容。

3. 在 Vue 组件中使用国际化

在 Vue 组件中，可以直接使用 $t 方法来获取翻译字符串：

<template>
  <div>
    <h1>{{ $t('greeting') }}</h1>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

此外，还可以在指令、过滤器、组件 props 等处使用 $t。例如：

<template>
  <button v-t="'button.save'"></button> <!-- 使用 v-t 指令 -->
</template>

<script>
export default {
  computed: {
    localizedTitle() {
      return this.$t('page.title');
    }
  },
  methods: {
    submitForm() {
      alert(this.$t('form.success'));
    }
  }
};
</script>

4. 动态切换语言

要在应用中动态切换语言，可以添加一个方法来更新 i18n.locale 属性，并触发视图更新：

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang;
    // 如果使用了 Vuex，可以在这里同步更新 store 中的语言状态
  }
}

然后在用户界面（如设置菜单、语言切换按钮）调用此方法，并传入目标语言代码（如 'en' 或 'zh'）。

5. 本地化时间、数字、日期等

vue-i18n 还提供了对时间、数字、日期等格式的本地化支持。在 i18n 实例化时可以配置相应的格式规则，然后在组件中使用 $d、$n、$tc 等辅助方法。 至此，您已经在 Vue 2 应用中成功实现了国际化支持。根据需要继续添加更多语言文件和翻译内容，以及相应的语言切换逻辑即可。

根据浏览器语言设置自动设置国际化

在 Vue 2 应用中，要根据浏览器的语言自动设置国际化，可以利用浏览器发送的 Accept-Language 请求头来获取用户偏好语言，并据此初始化或切换 vue-i18n 的 locale。以下是实现步骤：

1. 检查浏览器语言

在应用初始化阶段，可以使用 JavaScript 从 navigator.language 或 navigator.languages 获取浏览器的语言偏好。例如：

function getBrowserLocale() {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  } else {
    return navigator.language || navigator.userLanguage; // For older browsers
  }
}

const browserLocale = getBrowserLocale();

2. 初始化 vue-i18n

在创建 vue-i18n 实例时，使用上一步获取的浏览器语言设置 locale。同时，需要确保 messages 对象包含了对应语言的翻译内容。例如：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

const messages = {
  en: require('./i18n/en.json'), // 英文翻译
  'zh-CN': require('./i18n/zh-CN.json') // 简体中文翻译
};

const browserLocale = getBrowserLocale(); // 从上一步获取

const i18n = new VueI18n({
  locale: browserLocale, // 根据浏览器语言设置默认语言
  fallbackLocale: 'en', // 设置回退语言，当浏览器语言未匹配时使用
  messages
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

3. 处理语言匹配问题

浏览器发送的 Accept-Language 值可能包含区域变体（如 zh-CN、en-US），而您的应用可能只支持更通用的语言代码（如 zh、en）。在这种情况下，您可以适当地处理语言匹配逻辑，将浏览器语言映射到应用支持的语言：

function mapBrowserLocaleToSupportedLocale(browserLocale) {
  // 示例映射规则，可根据实际应用支持的语言进行调整
  const languageMap = {
    'zh-CN': 'zh',
    'en-US': 'en',
    // 添加其他映射规则...
  };

  return languageMap[browserLocale] || browserLocale;
}

const mappedLocale = mapBrowserLocaleToSupportedLocale(browserLocale);

然后使用 mappedLocale 替代 browserLocale 初始化 vue-i18n。

4. （可选）动态切换逻辑

如果应用提供了手动切换语言的功能，确保在切换时更新浏览器的 localStorage 或 sessionStorage，以便在页面刷新后保持用户的语言选择。同时，可以监听浏览器语言变更事件（如 window.onlanguagechange），并在语言变更时重新设置 vue-i18n 的 locale。

通过以上步骤，Vue 2 应用就能够根据浏览器的语言自动设置国际化。如果浏览器语言与应用支持的语言相匹配，用户打开应用时会看到相应语言的内容。如果不匹配，应用会按照设定的回退语言显示内容。