集成VueCli5各种功能与插件（三）国际化

 系列内容

1.集成VueCli5各种功能与插件（一）安装

2.集成VueCli5各种功能与插件（二）创建新项目

3.集成VueCli5各种功能与插件（三）国际化

4.集成VueCli5各种功能与插件（四）主题色配置&切换

安装

npm install vue-i18n@next --save

配置

1.在“src”目录下创建新文件夹“locale”，存放国际化配置文件；

2.在“locale”目录下创建新文件“index.ts”，为国际化初始化配置文件；

// index.ts
import { createI18n } from "vue-i18n";
import zh_CN from "./lang/zh_CN";
import zh_HK from "./lang/zh_TW";

const defaultLocale = "zh-CN";

const i18n = createI18n({
  locale: defaultLocale,
  messages: {
    "zh-CN": zh_CN,
    "zh-TW": zh_TW,
  },
});

export default i18n;

3.在“locale”目录下创建新文件夹“lang”，存放语言包文件；

4.在“lang”目录下创建新文件“zh_CN.ts”（简体中文）和“zh_TW.ts”（繁体中文），为语言包；

// zh_CN.ts
export default {
  "menu.locale": "国际化",
};

// zh_TW.ts
export default {
  "menu.locale": "國際化",
};

5.在“main.ts”文件中添加代码：

import i18n from "./locale";
app.use(i18n);

即可全局使用国际化插件，例：

<div>{{ $t("menu.locale") }}</div>