Vue-I18n
安装
npm i vue-i18n -S
实例
// src/i18n/index.js
const i18n = new VueI18n({
locale: "zh",
legacy: false, // 关闭使用传统API，CompositionAPI
// 未匹配时回退语言
fallbackLocale: "zh",
// 是否在回退到 fallbackLocale 或 root 时取消警告
silentFallbackWarn: true,
messages: {
zh: { test: "测试" },
hk: { test: "測試" },
},
});
export default i18n;
全局使用
// main.js
import { createApp } from "vue";
import i18n from "@/i18n";
const app = createApp(App);
app.use(i18n);
局部使用
创建实例
import { useI18n } from "vue-i18n";
export default () => {
const { t, messages } = useI18n({
messages: {
zh: {
title: "标题",
},
hk: {
title: "標題",
},
},
});
return { t, messages };
};
组件使用
<script setup>
import useI18nModulefrom "@/i18n/hooks/useI18nModule";
const { t } = useI18nModule();
</script>
格式化
const messages = {
zh: {
totalWord: "总计：{total}",
rankWord: "第一名：{0}，第二名：{1}，第三名：{2}",
tip: "请注意：您的余额不足<span>{num}</span>元",
},
};
<div>{{ $t("totalWord", { total: 32 }) }}</div>
<div>{{ $t("rankWord", ["Jack", "Mike", "Jenny"]) }}</div>
<div v-html="$t(tip, { num: 100 })"></div>
更改语言
import i18n from "@/i18n";
// 更改整个应用程序语言
i18n.global.locale.value = "zh";
// 更改i18n实例语言
i18n.locale.value = "zh";
