国际化

本项目集合了国际化 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'
  2. this.$i18n.mergeLocaleMessage('en', local.en)
  3. 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/Levelbarsrc/layout/components/SidebarItemsrc/layout/components/TabsView 等文件夹中 移除 this.$t('route.xxxx') 使用国际化的方式。

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