> `vue-i18n` 已升级至8.x版本，Github地址：[https://github.com/kazupon/vue-i18n](https://github.com/kazupon/vue-i18n) - 具体查看`src/locale`相关文件 ### 添加新语言示例 > 菜单配置的多语言也需在此配置 - `src/locale/index.js`中新增国家语言 ``` javascript # 定义的语言变量 import zhLocale from './lang/zh-CN'; # 设置iView的语言 import zhCnLocale from 'iview/src/locale/lang/zh-CN'; ... const messages = { 'zh-CN': Object.assign(zhCnLocale, zhLocale) }; ``` - 前端代码中新增语言下拉选择菜单 - `src/views/main-components/lang-switch.vue` - `src/views/main-components/language.vue` ```javascript <DropdownMenu slot="list"> <DropdownItem name="zh-CN" :selected="currLang == 'zh-CN'"> <div class="lan-logo-content"> <img src="@/assets/icon/chinese.png" class="country-logo" />简体中文 </div> </DropdownItem> </DropdownMenu> ``` ### 多语言国际化使用 - 使用`src/locale/lang/zh-CN.js`中配置的语言变量 ``` javascript export default { home: '首页' }; ``` - HTML标签中 `<div>{{ $t('home') }}</div>` - JavaScript中（返回数据变量） `this.$t('KEY')`