1. i18n的由来
i18n 全称Internationalization，因为单词太长中间18个字母被省略，缩写为18，这样就变成了18n。顾名思义，它是用来提供国际化的
那接下来就讲讲如何在ruoyi 项目里使用：
2. 安装插件
npm install vue-i18n --save3. 创建文件夹
在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的内置方法，用于获取指定翻译键对应的翻译文本。
这样就修改好了
