vue 国际化实现
Vue 国际化实现方法
安装依赖
使用 vue-i18n 库实现国际化，需先安装依赖：
npm install vue-i18n配置语言文件
创建语言资源文件，例如：
en.json（英文）：{ "hello": "Hello", "welcome": "Welcome to Vue" }zh.json（中文）：{ "hello": "你好", "welcome": "欢迎使用Vue" }
初始化 i18n
在 Vue 项目中初始化 vue-i18n：
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import zh from './locales/zh.json';
const i18n = createI18n({
locale: 'en', // 默认语言
fallbackLocale: 'en', // 回退语言
messages: {
en,
zh
}
});
// 在 Vue 应用中挂载
const app = createApp(App);
app.use(i18n);
app.mount('#app');模板中使用
在 Vue 模板中通过 $t 使用翻译：
<template>
<div>
<p>{{ $t('hello') }}</p>
<p>{{ $t('welcome') }}</p>
</div>
</template>动态切换语言
通过 locale 属性切换语言：
// 切换为中文
i18n.global.locale = 'zh';高级用法
-
复数处理：通过
|分隔复数形式：{ "apple": "apple | apples" }模板中使用：
<p>{{ $tc('apple', 2) }}</p> <!-- 输出 "apples" --> -
日期/货币本地化：使用
@formatjs/intl等库实现复杂格式化。
异步加载语言包
按需加载语言资源：
async function loadLocale(locale) {
const messages = await import(`./locales/${locale}.json`);
i18n.global.setLocaleMessage(locale, messages.default);
}与路由结合
根据路由参数动态设置语言：
router.beforeEach((to, from, next) => {
const lang = to.params.lang;
if (lang && i18n.global.availableLocales.includes(lang)) {
i18n.global.locale = lang;
}
next();
});注意事项
- 默认语言回退：确保未匹配的键有回退翻译。
- 键命名规范：使用嵌套结构（如
user.profile.name）提高可维护性。 - 性能优化：生产环境中预编译语言包以减少运行时开销。
