当前位置：首页 > VUE

vue 国际化实现

2026-02-23 08:27:46VUE

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 使用翻译：

vue 国际化实现

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

动态切换语言

通过 locale 属性切换语言：

// 切换为中文
i18n.global.locale = 'zh';

高级用法

复数处理：通过 | 分隔复数形式：

{
  "apple": "apple | apples"
}

模板中使用：

vue 国际化实现

<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();
});