tiny-vue/examples/sites/demos/pc/webdoc/i18n.md

国际化

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'

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

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

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

const app = createApp(App)

app.use(initI18n({ locale: 'zhCN' }))

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)

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

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

import Vue from 'vue'
import App from './App.vue'
import initI18n from './i18n'
import router from './router'

new Vue({
  i18n: initI18n({ locale: 'zhCN' }),
  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>