vue@3的国际化i18n

安装

npm i vue-i18n@9

参考链接： vue-i18n.intlify.dev/installatio…

配置

// main.js
import { i18n } from '@/language';
const app = createApp(App);

app.use(i18n);
app.use(createPinia()).mount('#app');

// language/index.js
import { createI18n } from "vue-i18n";
import zh from "@/language/zh";
import en from "@/language/en";

const default_lang = "en";
export const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale: default_lang,
  messages: {
    zh,
    en,
  }
});

// zh.js

export default {
    message: {
        xxx: "xxxxx",
        
    }
};

vue文件中使用

$t 是全局的，可以直接使用

<template>
<div>{{$t('message.xxx')}}</div>
</template>

// 或者

import { useI18n } from 'vue-i18n';

const {t} = useI18n();

return {t}

<template>
<div>{{t('message.xxx')}}</div>
<div>{{$t('message.xxx')}}</div>
</template>

JS或者TS文件中使用

import { i18n } from '@/language';

const a = i18n.global.t('message.start');