国际化

官方文档

安装 vue-i18n

yarn add vue-i18n

配置 vue-i18n

在 src 文件夹下创建下创建 language 文件夹，并创建 i18n.js、enUS.js和zhCN.js 等文件，内容如下：

// i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import enUS from "./enUS";
import zhCN from "./zhCN";

Vue.use(VueI18n);

const messages = {
  enUS,
  zhCN,
};

const i18n = new VueI18n({
  locale: "zhCN", // 默认语言
  fallbackLocale: "zhCN", // 回退语言
  messages,
});

export default i18n;

// enUS.js
export default {
  home: "Home",
  workbench: "Workbench",
  examplePage: "Example Page",
};

// zhCN.js
export default {
  home: "首页",
  workbench: "工作台",
  examplePage: "示例页",
};

使用 vue-i18n

引入 vue-i18n

在 src/main.js 文件中引入 i18n：

// 引入 i18n
import i18n from "./language/i18n";

这时候已经挂载 $t、$i18n 到 Vue 的全局属性中，使用 $t 函数来获取国际化文本，使用 $i18n.locale 来切换语言。

修改语言包

// 切换中文
this.$i18n.locale = 'zhCN';

// 切换英文
this.$i18n.locale = 'enUS';

使用示例

<template>
  <div>{{ $t("home") }}</div>
</template>

当 $i18n.locale 为 zhCN 时，页面显示 首页；

当 $i18n.locale 为 enUS 时，页面显示 Home。