国际化

本项目集合了国际化 i18n 方案。通过 vue-i18n而实现。

由于本项目 ui 框架使用了element，所以国际化的同时也要将其国际化。完整代码。同时将当前 lang 语言存在 cookie之中，为了下次打开页面能记住上次的语言设置。

全局 lang

代码地址: @/lang目前配置了英文和中文两种语言。

同时在 @/lang/index.js 中引入了 element-ui的语言包

使用：

  1. // $t 是 vue-i18n 提供的全局方法，更多信息请查看其文档
  2. $t('login.title')

异步 lang

有一些某些特定页面才需要的 lang，比如 @/views/i18n-demo 页面

  1. import local from './local'
  3. this.$i18n.mergeLocaleMessage('en', local.en)
  4. this.$i18n.mergeLocaleMessage('zh', local.zh)

js 中使用 $t

如果你使用如 select组件，它的值是通过 v-for而来，如：

  1. <el-select v-model="value">
  2.   <el-option
  3.     v-for="item in options"
  4.     :key="item.value"
  5.     :label="item.label"
  6.     :value="item.value"/>
  7. </el-select>
  1. this.options = [
  2.   {
  3.     value: '1',
  4.     label: this.$t('i18nView.one')
  5.   },
  6.   {
  7.     value: '2',
  8.     label: this.$t('i18nView.two')
  9.   },
  10.   {
  11.     value: '3',
  12.     label: this.$t('i18nView.three')
  13.   }
  14. ]

这种情况下，国际化只会执行一次，因为在 js 中的this.options只会在初始化的时候执行一次，它的数据并不会随着你本地 lang的变化而变化，所以需要你在lang变化的时候手动重设this.options。

  1. export default {
  2.   watch: {
  3.     lang() {
  4.       this.setOptions()
  5.     }
  6.   },
  7.   methods: {
  8.     setOptions() {
  9.       this.options = [
  10.         {
  11.           value: '1',
  12.           label: this.$t('i18nView.one')
  13.         },
  14.         {
  15.           value: '2',
  16.           label: this.$t('i18nView.two')
  17.         },
  18.         {
  19.           value: '3',
  20.           label: this.$t('i18nView.three')
  21.         }
  22.       ]
  23.     }
  24.   }
  25. }

移除国际化

在 src/main.js 中移除 import i18n from './lang' 并且删除 src/lang 文件夹。

并在 src/layout/components/Levelbar、src/layout/components/SidebarItem、src/layout/components/TabsView 等文件夹中 移除 this.$t('route.xxxx') 使用国际化的方式。

原文: https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html