官方文档链接
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>