# 国际化

`TinyVue` 使用 `Vue` 的官方国际化插件，需要安装 `vue-i18n` 插件。

## Vue 3.0 版本国际化配置

步骤一、推荐安装 `^9.1.6` 版本的`vue-i18n` 插件，通过以下命令安装：

```bash
yarn add vue-i18n
# 或者
npm install vue-i18n
```

步骤二、新增 `src/i18n/index.js` 文件，文件内容如下：

```js
import { createI18n } from 'vue-i18n'
import locale from '@opentiny/vue-locale'

const initI18n = (i18n) =>
  locale.initI18n({
    i18n,
    createI18n,
    messages: {
      zhCN: {
        test: '中文'
      },
      enUS: {
        test: 'English'
      }
    }
  })

export const i18n = initI18n({ locale: 'zhCN' })
```

步骤三、修改 `src/main.js`，添加以下代码：

```js
import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './i18n'
import router from './router'

const app = createApp(App)

app.use(i18n)

app.use(router).mount('#app')
```

## Vue 2.0 版本国际化配置

步骤一、推荐安装 `8.15.0` 版本的`vue-i18n` 插件，通过以下命令安装：

```bash
yarn add vue-i18n@8.15.0
# 或者
npm install vue-i18n@8.15.0
```

步骤二、新增 `src/i18n/index.js` 文件，文件内容如下：

```js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from '@opentiny/vue-locale'

Vue.use(VueI18n)

const initI18n = (i18n) =>
  locale.initI18n({
    i18n,
    VueI18n,
    messages: {
      zhCN: {
        test: '中文'
      },
      enUS: {
        test: 'English'
      }
    }
  })

export const i18n = initI18n({ locale: 'zhCN' })
```

步骤三、修改 `src/main.js`，添加以下代码：

```js
import Vue from 'vue'
import App from './App.vue'
import { i18n } from './i18n'
import router from './router'

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

## 自定义国际化配置

如果需要自定义国际化配置可以修改 `src/i18n/index.js` 如下以 `Vue 3.0` 版本为例（`Vue 2.0` 版本同理）：

```js
import { createI18n } from 'vue-i18n'
import locale from '@opentiny/vue-locale'

const customCreateI18n = ({ locale, messages }) => {
  return createI18n({
    locale,
    messages,
    legacy: false // 自定义配置
  })
}

export default (i18n) =>
  locale.initI18n({
    i18n,
    createI18n: customCreateI18n,
    messages: {
      zhCN: {
        test: '中文'
      },
      enUS: {
        test: 'English'
      }
    }
  })
```

## 语言切换

配置国际化插件之后，可以通过以下方式在模板中使用国际化词条。

```html
<template>
  <div>{{ $t('test') }}</div>
</template>
```

如果你需要切换语言，可以通过动态修改 Vue 实例中的 `ctx.$i18n.locale` 来实现。

```html
<script setup lang="ts">
  import { getCurrentInstance } from 'vue'

  const ctx = getCurrentInstance()?.ctx
  const changeLang = () => {
    ctx.$i18n.locale = ctx.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
  }
</script>
```

Vue2 中切换语言的写法如下：

```html
<script>
  export default {
    methods: {
      changeLang: function () {
        this.$i18n.locale = this.$i18n.locale === 'zhCN' ? 'enUS' : 'zhCN'
      }
    }
  }
</script>
```

### 在 JavaScript 中使用

有时我们需要在纯 JavaScript 文件中使用国际化词条，而不是在 Vue 组件中，这时我们可以直接导入 `i18n` 变量，调用 `i18n.global.t` 方法即可。

```js
import { i18n } from './i18n'

const test = i18n.global.t('test')
```

## 添加其它小语种

在组件库中，默认内置了中英 2 种语言。从 `@opentiny/vue@3.22.0` 版本开始，组件库新增了西班牙语和葡萄牙语的国际化语言包，用户可以在配置国际化时使用。

```js {18-26}
import { createI18n } from 'vue-i18n'
import locale from '@opentiny/vue-locale'

// 导入小语种的包
import { esLA, ptBR } from '@opentiny/vue-locale'

const initI18n = (i18n) =>
  locale.initI18n({
    i18n,
    createI18n,
    messages: {
      zhCN: {
        test: '项目自用的国际化内容'
      },
      enUS: {
        test: 'project self-use for English'
      },
      esLA: {
        // 将组件库的国际化语言包混入项目自用的内容
        ...esLA,
        test: 'Contenido de los propios proyectos'
      },
      ptBR: {
        ...ptBR,
        test: 'Conteúdo para uso próprio do projeto'
      }
    }
  })

export const i18n = initI18n({ locale: 'esLA' }) // 此处指定初始的默认语言
```

通过上述代码，Vue3 项目支持四个语种的国际化环境就配置好了。Vue2 的项目配置方法也一样，都是导入小语种的国际化语言包后，混入项目的国际化内容即可。
