Vue.js 项目中如何实现国际化

随着全球化的发展，越来越多的应用程序需要支持多语言。Vue.js 作为一款流行的前端框架，提供了一种简单而强大的方式来实现国际化。

本文将介绍如何在 Vue.js 项目中实现国际化，包括如何配置语言文件、如何在组件中使用翻译、如何切换语言等。

配置语言文件

首先，我们需要准备语言文件。一个语言文件是一个包含键值对的 JavaScript 对象，其中键是需要翻译的字符串，值是对应的翻译。例如，英语语言文件可以长这样：

export default {
  hello: 'Hello',
  world: 'World',
  welcome: 'Welcome to my app'
}

Vue.js 推荐使用 vue-i18n 插件来实现国际化。我们可以使用 vue-cli 来创建一个新的 Vue.js 项目，并在项目中安装 vue-i18n：

vue create my-app
cd my-app
npm install vue-i18n

接下来，在 src 目录下创建一个 locales 目录，并在其中创建语言文件。例如，我们可以创建 en.js 和 zh-CN.js 两个文件，分别存储英语和简体中文的翻译。语言文件的命名规则是 语言代码.js，其中语言代码是根据 ISO 639-1 标准来确定的。

// www.javascriptcn.com code example
// en.js
export default {
  hello: 'Hello',
  world: 'World',
  welcome: 'Welcome to my app'
}

// zh-CN.js
export default {
  hello: '你好',
  world: '世界',
  welcome: '欢迎来到我的应用'
}

我们需要在 Vue.js 应用程序中引入这些语言文件并创建一个 vue-i18n 实例。在 main.js 文件中添加以下代码：

// www.javascriptcn.com code example
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en'
import zhCN from './locales/zh-CN'

Vue.use(VueI18n)

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

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

这段代码引入了 vue-i18n 和语言文件，并创建了一个 vue-i18n 实例。locale 选项指定了默认语言，messages 选项指定了所有支持的语言及其对应的语言文件。

在组件中使用翻译

现在，我们已经准备好了语言文件和 vue-i18n 实例。接下来，我们需要在组件中使用翻译。

vue-i18n 提供了一个 $t 方法来实现翻译。我们可以在组件模板中使用 {{$t('key')}} 来引用翻译。例如，我们可以创建一个 HelloWorld 组件，并在其中使用翻译：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>{{$t('hello')}} {{$t('world')}}!</h1>
    <p>{{$t('welcome')}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

现在，我们可以在 HelloWorld 组件中使用 $t 方法来引用翻译。当我们切换语言时，vue-i18n 会自动更新翻译。

切换语言

最后，我们需要提供一种方式来切换语言。vue-i18n 提供了一个 $i18n 对象来管理语言设置。我们可以在组件中使用 $i18n.locale 属性来获取或设置当前语言。

例如，我们可以创建一个 LanguageSwitcher 组件，并在其中提供一个下拉菜单来切换语言：

// www.javascriptcn.com code example
<template>
  <div>
    <select v-model="$i18n.locale">
      <option value="en">English</option>
      <option value="zh-CN">简体中文</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'LanguageSwitcher'
}
</script>

现在，我们已经完成了 Vue.js 项目的国际化。通过配置语言文件、在组件中使用翻译和提供语言切换功能，我们可以为我们的应用程序提供多语言支持，使其更加友好和易用。

完整示例代码请参考 GitHub。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da6008a941bf7134250e5c