vue3中如何应用多语言

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

本文内容已在本人项目中应用，欢迎clone查看。github.com/chris-zhu/c…

I18n-next

i18n官网地址：vue-i18n.intlify.dev/

• 使用CDN: <script src="https://unpkg.com/vue-i18n@9"></script>

• playground 在线案例 CodeSandbox

• vue3项目中安装

  npm install vue-i18n@next
  

  vite 项目顺便安装插件

  npm i -D @intlify/vite-plugin-vue-i18n
  

usage

上手使用很简单，详情可以细看文档。 例如结合composition api，你可以 要与Vue 3 的useI18nin组合，setup您需要做一件事，您需要将函数的legacy选项设置createI18n为false.

以下是将legacy选项添加到 的示例createI18n：

const i18n = VueI18n.createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: 'ja', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
  // If you need to specify other options, you can set other options
  // ...
})

于是我们可以在 setup中

const app = Vue.createApp({
  setup() {
    const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
    return { t } // return render context that included `t`
  }
})

其实这个插件中最重要的就是这个t函数，就是他将所有的模版语言进行转换

vite项目中引用

安装@intlify/vite-plugin-vue-i18nvite 插件

应用插件

import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
    plugins:[
        vueI18n({
          runtimeOnly: true,
          compositionOnly: true,
          include: [pathResolve('locales/**')]
        }),
    ],
    ......
})

然后我们准备好我们多语言文件，例如.yml配置文件

// zh-cn.yml
button:
  about: 关于
  back: 返回
  go: 确定
  home: 首页
  toggle_dark: 切换深色模式
  toggle_langs: 切换语言

位于项目的顶级目录中。

如何应用到项目呢？ 具体远离可以参考上文：# vue3中如何一次应用所有module

我们定义我们的i18n为一个module，该模块到处一个插件函数，于是我们只需要在插件中，对拿到的app实例进行应用就好了。

于是有：

const messages = Object.fromEntries(
    Object.entries(
      import.meta.globEager('../../locales/*.y(a)?ml'))
      .map(([key, value]) => {
        const yaml = key.endsWith('.yaml')
        return [key.slice(14, yaml ? -5 : -4), value.default]
      })
)

我们先导入我们的所有locales下面的所有语言文件，然后在对我们的文件进行循环操作。

最后处理成createI18n需要的语言格式

然后我们进行应用操作

const i18n = createI18n({
    legacy: false,
    locale: 'zh-CN',
    messages
})
app.use(i18n)

这样我们就完美应用起来了。

使用

<script lang='ts' setup>
const { t } = useI18n()
</script>

<template>
  <div class="max-w-65ch m-auto">
    <button>{{ t('button.about') }}}</button>
  </div>
</template>

你只要导入t函数，进行.yml配置的字段进行翻译即可。

如果你安装了vscode扩展，你还可以更好的进行查看翻译的值

已经成功成功应用了，但是如何切换语言呢？

例如：我给下面的button绑定一个点击事件，进行语言切换操作。

<a
  text-inherit
  no-underline
  outline-none
  op-50
  hover="op-100"
  transition-opacity-300
>
  <div w-6 h-6 class="i-carbon:language" @click="toggleLocales"></div>
</a>

我们还是需要对 i18n中的方法进行应用

<script lang="ts" setup>
const { availableLocales, locale } = useI18n()
const toggleLocales = () => {
  const locales = availableLocales
  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
}
</script>

那么，现在你就可以对你配置的语言包进行随意切换了。