国际化

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

Vue 3.0 版本国际化配置

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

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

步骤二、新增 src/i18n/index.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，添加以下代码：

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 插件，通过以下命令安装：

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

步骤二、新增 src/i18n/index.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，添加以下代码：

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 版本同理）：

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'
      }
    }
  })

语言切换

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

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

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

<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 中切换语言的写法如下：

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

在 JavaScript 中使用

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

import { i18n } from './i18n'

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

添加其它小语种

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

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 的项目配置方法也一样，都是导入小语种的国际化语言包后，混入项目的国际化内容即可。