当前位置：首页 > VUE

vue国际化实现

2026-02-22 18:13:16VUE

Vue 国际化实现方法

Vue 国际化（i18n）可以通过 vue-i18n 库实现，该库是 Vue 官方推荐的国际化解决方案。

安装 vue-i18n

使用 npm 或 yarn 安装 vue-i18n：

npm install vue-i18n
# 或
yarn add vue-i18n

配置国际化

在 Vue 项目中创建国际化配置文件，通常命名为 i18n.js 或直接集成到主入口文件中。

import { createI18n } from 'vue-i18n';

// 定义语言包
const messages = {
  en: {
    greeting: 'Hello!',
    button: {
      submit: 'Submit'
    }
  },
  zh: {
    greeting: '你好！',
    button: {
      submit: '提交'
    }
  }
};

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages
});

export default i18n;

在 Vue 应用中使用

在 main.js 中引入并挂载 i18n：

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

在组件中使用

在模板或脚本中通过 $t 方法或 useI18n 组合式 API 使用国际化内容。

模板中使用：

<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <button>{{ $t('button.submit') }}</button>
  </div>
</template>

组合式 API 中使用：

import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    return {
      greeting: t('greeting')
    };
  }
};

切换语言

通过 i18n.global.locale 动态切换语言：

import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { locale } = useI18n();
    const changeLanguage = (lang) => {
      locale.value = lang;
    };
    return { changeLanguage };
  }
};

异步加载语言包

对于大型项目，可以按需加载语言包以减少初始加载时间：

const loadLocaleMessages = async (locale) => {
  const response = await import(`./locales/${locale}.json`);
  return response.default;
};

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
});

// 动态加载语言包
loadLocaleMessages('en').then(messages => {
  i18n.global.setLocaleMessage('en', messages);
});

格式化与复数处理

vue-i18n 支持复数、日期、货币等格式化：

const messages = {
  en: {
    apple: 'apple | apples',
    date: 'Today is {date}'
  }
};

// 模板中使用
<p>{{ $tc('apple', 2) }}</p>
<p>{{ $t('date', { date: new Date() }) }}</p>

路由与国际化结合

结合 vue-router 实现基于 URL 的语言切换：

const router = createRouter({
  routes: [
    {
      path: '/:locale',
      component: Home,
      beforeEnter: (to) => {
        const locale = to.params.locale;
        if (!['en', 'zh'].includes(locale)) return '/en';
        i18n.global.locale = locale;
      }
    }
  ]
});

通过以上方法，可以高效实现 Vue 项目的国际化功能，支持多语言切换和动态加载。

vue国际化实现