Vue3 组合式 API 使用 i18n 实现本地化

Vue3 使用选项式 API 较容易，按文档上手就行，这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn', // 设置当前语言
  legacy: false, // 要支持组合式API，此项必须设置为false;
  // globalInjection: true, // 全局vue视图中注册$t方法，vue-i18n v9.2 之后默认是 true
  messages: {
    cn: {
      message: {
        hello: '你好',
      },
    },
    en: {
      message: {
        hello: 'hello',
      },
    },
  },
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n，关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
  <div>在视图中使用语言： {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数，需要频繁使用，这样太麻烦了。
我们可以定义 window.$t 全局函数，这样在 setup 中也能直接用 $t()取得语言信息。

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn',
  messages: {
    cn: {
      hello: '你好',
    },
    en: {
        hello: 'hello',
    },
  },
});

window.$t = function() {
  return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档： https://vue-i18n.intlify.dev/guide/