Vue项目中实现国际化

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

前端国际化

i18n 想必大家并不陌生，它是前端国际化的一种实现方式，在项目中最常见的就是中英文之间的切换。

在项目开发中，我们既可以根据所使用的框架提供的方法进行配置，配置后可以直接使组件的文字在中英文之间切换，同时我们也可以自定义配置文件，手工翻译对应的文本内容。

Ant Design 国际化配置

以 Ant Design 为例，官方提供的 ConfigProvider 全局化配置中，第一个就是关于组件中 i18n 的处理方式ConfigProvider 全局化配置

其中，需要使用 <a-config-provider> 组件来包裹需要被国际化的其它组件，无需手动翻译即可且切换组件上文字的语言

import enUS from 'ant-design-vue/es/locale/en_US'; 
import zhCN from 'ant-design-vue/es/locale/zh_CN';

<a-config-provider :locale="locale === 'en' ? enUS : zhCN">
    <!-- 需要被国际化的组件 -->
</a-config-provider>

自定义国际化配置

1. 安装

npm install vue-i18n --save

2.在入口文件main.js中引入并使用

引入、实例化对象、使用：

import VueI18n from "vue-i18n";
const i18n = new VueI18n({
  locale: window.sessionStorage.getItem("lang") || "zh", //语言标识
  messages: {
    zh: require("@/lang/zh.js"), // 中文
    en: require("@/lang/en.js") // 英文
  }
});
Vue.use(i18n)

也可以建立对应的 json 文件，将翻译的内容放在同一个文件中：

{
    "cn": {
        "新增": "新增"
    },
    "en": {
        "新增": "add"
    }
}

在具体的页面中使用:

$t()是引入国际化后,挂到 Vue.prototype 上的一个方法，参数为一个字符串。项目运行后，展示的内容会与上一步文件中配置的翻译内容进行对应，呈现出不同的语言版本。

代码中再添加语言切换的选项，就可以达到目标效果：

<h1>{{ $t('新增') }}</h1>

运行结果如下：