有关ruoyi 项目菜单框如何设置国际化----附上完整代码

1. i18n的由来

i18n?? 全称Internationalization，因为单词太长中间18个字母被省略，缩写为18，这样就变成了18n。顾名思义，它是用来提供国际化的

那接下来就讲讲如何在ruoyi 项目里使用：

2. 安装插件

npm install vue-i18n --save

3. 创建文件夹

?? 在src下创建i18n文件夹，文件夹下面包含en.js,zh.js及index.js

其中index.js用于设置国际化的配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang导入Element的语言包 英文
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang g导入Element的语言包 中文
import enLocale from './en' // 导入项目中用到的英文语言包
import zhLocale from './zh'// 导入项目中用到的中文语言包
Vue.use(VueI18n)
const messages = {                   
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale,
  },

}

const i18n = new VueI18n({
  locale: localStorage.getItem('language') || 'zh', // 设置当前语种，之所以放到storage中是为了避免用户手动点击刷新页面时语言被自动切换回去，所以需要把语言存起来
  messages, // 设置全局当地语言包,
  fallbackLocale: 'zh', //如果当前语种不存在时，默认设置当前语种
  numberFormats:{ //设置 数字本地化
    'en': {
      currency: { //添加 $
        style: 'currency', currency: 'USD'
      }
    },
    'zh': {
      currency: { //添加 ￥
        style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
      }
    }
  },
    dateTimeFormats:{//设置 日期时间本地化
    'en': {
      short: { 
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'short', day: 'numeric',
        weekday: 'short', hour: 'numeric', minute: 'numeric'
      }
    },
    'zh': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
            year: 'numeric', month: 'short', day: 'numeric',
            weekday: 'short', hour: 'numeric', minute: 'numeric'  
      }
    }
  }
})

export default i18n

en.js ：英文语言包

export default {
    common: {
      username: '用户名',
      password: '密码',
      save: '保存',
      edit: '编辑',
      update: '更新',
      delete: '删除',
      forever: '永久',
      expired: '过期'
    },
    menus:{
        首页:"home page",
        用户管理:"user manage"
    },
    search:"search"
}

cn.js：中文语言包

export default {
    common: {
      username: '用户名',
      password: '密码',
      save: '保存',
      edit: '编辑',
      update: '更新',
      delete: '删除',
      forever: '永久',
      expired: '过期'
    },
    menus:{
        首页:"home page",
        用户管理:"user manage"
    },
    search:"搜索"
}

这里的menus:是用于上方menutitle这块，先找了两个菜单测试一下

4. 菜单栏页面增加国际化

改动如下

添加对应的方法：

?? this.$te是Vue的内置方法，用于检查是否存在指定的翻译键

?? this.$t是Vue的内置方法，用于获取指定翻译键对应的翻译文本

?? return item: 如果不存在翻译键，那么返回原始的item

?? 这个方法是根据传入的item参数，检查是否存在对应的翻译文本，并返回翻译文本或原始的item。用于实现多语言的菜单标题翻译功能

5. 增加语言切换按钮

vue页面：

       <el-select style="width: 100%" @change="changeLanguage" v-model="lang">
          <el-option v-for="lan in langList"
                    :key="lan.value"
                    :label="lan.label"
                    :value="lan.value">
          </el-option>
        </el-select>

对应的数据：

  data(){
    return {
      lang: "cn",
      langList: [
        {
          label: "中文",
          value: "zh"
        },
        {
          label: "English",
          value: "en"
        }
      ],
    }
  },

对应的方法:

  methods: {
    changeLanguage(event){
      i18n.locale= event // 改变为中文
      localStorage.setItem('language',event)//在localStorage中存入设置
    },

这样就实现了语言的切换

6. 按钮国际化

?? 如果是按钮或者是其他内容又该如何修改，这种情况就更简单了，可以看到，我在前面的语言包里增加了搜索，为的就是修改搜索按钮，只要在页面上做如下修改即可

? 这里说明一下，search是我们在语言包里设置的共通名，this.$t是Vue的内置方法，用于获取指定翻译键对应的翻译文本。

? 这样就修改好了