vue3使用 i18n

官方文档链接

Vue I18n 官方文档

安装 Vue I18n

npm install vue-i18n

创建语言文件

// lang/zh.ts
export default {
    login: {
        login: '登录',
        userName: '用户名',
        password: '密码',
    },
};

创建 i18n 配置文件

// i18n/index.js
import { createI18n } from 'vue-i18n';
import zh from './zh';

const language = (navigator.language || 'en').toLocaleLowerCase(); // 获取浏览器的语言设置
const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || language, // 优先从本地存储获取语言设置，如果没有则使用浏览器默认语言
  fallbackLocale: 'en', // 当前语言无法找到匹配的翻译时，使用的备选语言
  messages: {
    en,
    zh,
  },
});

export default i18n;

在主入口文件中使用 i18n

// main.js
import i18n from './i18n/index.js';

app.use(i18n);

在组件中使用 I18n

<template>
  {{ $t("login.password") }}
  <div v-t="'login.password'"></div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
console.log(t("home.hello"));
</script>

切换语言

<template>
    <div class="menu">
        <div @click="changeLang('en')">English</div>
        <div @click="changeLang('zh')">中文</div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();

const changeLang = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang); // 保存用户的语言选择到本地存储
};
</script>