> `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')`