Vue I18n 国际化三步走，轻松入门！

2023-10-25 06:06:03

Vue.js 中的国际化（i18n）是一项不可或缺的功能，它能让你轻松打造支持多语言的应用。而 Vue I18n 是一个轻量级、易于使用的 i18n 库，深受广大 Vue.js 开发者的喜爱。

在这篇指南中，我们将带你踏上 Vue I18n 的入门之旅，分三步教会你如何快速上手。

第 1 步：目录结构和插件配置

创建语言包文件： 在 src 目录下创建语言包文件，例如 zh-CN.json 和 en-US.json，用于存储不同语言的翻译内容。
安装 Vue I18n 插件： 运行 npm install vue-i18n 安装 Vue I18n 插件。
配置 Vue I18n 插件： 在 main.js 中配置 Vue I18n 插件，指定语言包文件的位置。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCN from './lang/zh-CN.json';
import enUS from './lang/en-US.json';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  }
});

第 2 步：挂载到 Vue 实例

挂载 Vue I18n 插件到 Vue 实例，可以使用 $t() 方法获取翻译后的文本。

import Vue from 'vue';
import { createApp } from 'vue';

const app = createApp({});
app.use(i18n);

new Vue({
  el: '#app',
  render: h => h('div', { id: 'app' }, [
    '{{ $t('message') }}'
  ])
});

第 3 步：使用 $t() 方法

使用 $t() 方法获取翻译后的文本，该方法接收两个参数：

messageKey： 翻译信息的键。
locale： 可选参数，指定要获取的语言环境。如果不指定，则使用当前语言环境。

import Vue from 'vue';
import { createApp } from 'vue';

const app = createApp({});
app.use(i18n);

new Vue({
  el: '#app',
  render: h => h('div', { id: 'app' }, [
    '{{ $t('message', { locale: 'en-US' }) }}'
  ])
});

进阶指南

i18n 面向函数的封装

使用 i18n 面向函数的封装，可以更加简洁地使用 $t() 方法。

创建语言包文件： 同上，创建语言包文件。
安装并配置 Vue I18n 插件： 同上。
创建 i18n 函数： 在 main.js 中创建 i18n 函数。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import { createI18n } from 'vue-i18n';
import zhCN from './lang/zh-CN.json';
import enUS from './lang/en-US.json';

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
  }
});

const i18nInstance = i18n.global;

export default ({ app }) => {
  app.config.globalProperties.$t = (messageKey, locale) => {
    return i18nInstance.t(messageKey, { locale });
  };
};

灵活使用占位符

$t() 方法支持使用占位符，让翻译信息更加灵活。

import Vue from 'vue';
import { createApp } from 'vue';

const app = createApp({});
app.use(i18n);

new Vue({
  el: '#app',
  render: h => h('div', { id: 'app' }, [
    '{{ $t('message', { name: 'John' }) }}'
  ])
});