Vue.js 中如何使用 i18n 实现多语言支持-JavaScript中文网-JavaScript教程资源分享门户

简介

在当今全球化的互联网时代，多语言的支持已经成为了一个不可或缺的功能。在 Vue.js 中，i18n 就是一个非常好用的库，能够快速实现多语言支持。本文将详细介绍如何使用 i18n 实现多语言支持，并提供示例代码和使用建议。

安装 i18n

使用 Vue.js 中的 i18n 首先需要安装它。可以使用 npm 安装：

npm install vue-i18n

也可以通过 CDN 直接引入：

<script src="https://cdn.jsdelivr.net/npm/vue-i18n/dist/vue-i18n.js"></script>

配置 i18n

安装完 i18n 之后，需要在 Vue.js 中进行配置。首先，在 Vue.js 的实例中引入 i18n：

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

然后，创建一个新的 VueI18n 实例，并将其挂载到 Vue 实例上：

// javascriptcn.com 代码示例
const i18n = new VueI18n({
  locale: 'en', //默认语言
  fallbackLocale: 'en',
  messages: {
    en: { /*...*/ },
    zh: { /*...*/ }
  }
})

new Vue({
  i18n,
  //...
}).$mount('#app')

在上述代码中，我们通过 locale 属性来指定默认语言，通过 fallbackLocale 属性来指定 fallback 语言（如果找不到当前语言的翻译，会自动回退到 fallback 语言），最后将 messages 属性设为一个 JavaScript 对象，其中包含了不同语言版本的翻译。

使用 i18n

配置好 i18n 之后，我们就可以在 Vue.js 中使用它了。使用 i18n 最基本的方式，就是在 Vue 的模板中使用 {{$t('message.hello')}} 这样的语法来读取翻译。例如：

// javascriptcn.com 代码示例
<template>
  <div>
    <p>{{$t('message.hello')}}，{{name}}！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue.js'
    }
  }
}
</script>

<!-- en.json -->
{
  "message": {
    "hello": "Hello"
  }
}

在上面的代码中，我们在模板中使用了 $t 方法来读取翻译。message.hello 是翻译文件中的一个键，对应的值是 Hello。这样，在不同语言版本的翻译文件中，我们只需要更改 Hello 的值，就可以实现不同语言的展示。

在不同语言版本之间切换

为了让用户在不同语言版本之间切换，我们可以在 Vue 中加入一个切换语言的下拉列表：

// javascriptcn.com 代码示例
<template>
  <div>
    <select v-model="locale" @change="onChange">
      <option v-for="(value, key) in locales" :key="key" :value="key">{{value}}</option>
    </select>
    <p>{{$t('message.hello')}}，{{name}}！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue.js',
      locale: 'en',
      locales: {
        en: 'English',
        zh: '简体中文'
      }
    }
  },
  methods: {
    onChange() {
      this.$i18n.locale = this.locale
    }
  }
}
</script>

<!-- en.json -->
{
  "message": {
    "hello": "Hello"
  }
}

<!-- zh.json -->
{
  "message": {
    "hello": "你好"
  }
}

在上述代码中，我们在模板中加入了一个下拉列表，通过 v-for 指令遍历 locales 对象，生成多个选项。v-model 指令绑定了切换语言的选择项，@change 指令监听选择项的变化，当选择的语言打勾时，调用 onChange 方法来更新当前的语言：

this.$i18n.locale = this.locale

这样，当用户选择不同的语言版本时，页面的翻译也会随之发生变化。

从后台获取语言配置

上述方法适用于静态的多语言应用，但如果需要从后台获取语言配置，则需要更改代码架构。在 Vue.js 中，可以使用 Vue.mixin 方法来原型继承 $t 方法，将其应用到所有组件。

// javascriptcn.com 代码示例
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {},
    zh: {}
  }
})

let loadedLanguages = [] // 已经加载过的语言配置

function setLanguage(lang) {
  if (loadedLanguages.indexOf(lang) === -1) {
    return axios.get(`/i18n/${lang}.json`).then(response => {
      const messages = response.data
      i18n.setLocaleMessage(lang, messages)
      loadedLanguages.push(lang)
      return lang
    })
  }
  return Promise.resolve(lang)
}

Vue.mixin({
  methods: {
    $t(key) {
      return i18n.t(key)
    },
    setLocale(lang) {
      setLanguage(lang).then(() => {
        i18n.locale = lang
      })
    }
  }
})

export default i18n

在上述代码中，我们首先创建了一个 loadedLanguages 数组，用于记录已经加载过的语言配置，避免重复请求。接着，我们定义了一个 setLanguage 方法，它发送一个 AJAX 请求来获取语言配置，然后使用 i18n.setLocaleMessage 方法将其保存到 i18n 中，最后将该语言配置加入到 loadedLanguages 中。

在 Vue.js 中，我们可以使用 $t 方法来获取翻译，在上述代码中，我们使用 Vue.mixin 方法将 $t 方法添加到所有组件中。setLocale 方法用于在切换语言版本时，调用 setLanguage 方法获取对应语言配置，并将其设置为当前语言。

总结

在本文中，我们演示了如何使用 Vue.js 和 i18n 库快速实现多语言支持。通过示例代码详细介绍了配置 i18n，使用 $t 方法获取翻译，以及如何在多个语言版本之间切换。最后，我们提供了从后台获取语言配置的解决方案。建议对 Vue.js 开发的前端工程师都应该具备 i18n 相关知识，以便更好地服务于全球化的互联网时代。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583bc11d2f5e1655de8d6cb