基于element页面国际化多语言

配置element ui内置的语言

下载包

npm install vue-i18n@8.22.2
npm install js-cookie

创建文件src/lang/index.js

import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n' //引入国际化的插件包
import Cookies from 'js-cookie' //引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' //引入饿了么英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' //引入饿了么中文包
import customZH from './zh' //引入自定义中文包
import customEN from './en' //引入自定义英文包
Vue.use(VueI18n)//全局注册国际化包

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: Cookies.get('language') || 'zh', //从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN, //将饿了么英文包引入
      ...customEN //自定义英文包
    },
    zh: {
      ...elementZH, //将饿了么中文包引入
      ...customZH //自定义中文包
    }
  }
})

main.js文件内

import i18n from '@/lang';

// 配置Element UI的中英文切换逻辑
Vue.use(ElementUI, {
  i18n:(key,value)=>i18n.t(key,value)
})

new Vue({
  el:'#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

配置前端输入页面文字的语言

创建文件src/lang/en.js 放英文包

创建文件src/lang/zh.js 放中文包

拿中文包示例，英文包和中文包的框架都是一样的，值改成英文即可
export default {
    navbar:{
        title:'标题',
        version:'体验版'
    },
    login:{
        account:'账号',
        password:'密码'
    }
}

使用

将前端在页面中写入的文字替换
{{$t('navbar.title')}}

切换页面语言

//写一个下拉框(element ui有),建议写一个公共组件
//选中哪个语言时给函数返回一个代表该语言的值,返回zh或en
import Cookies from 'js-cookie' //引入cookie存储
methods:{
    changeLanguage(lang) {
        Cookies.set('language',lang) //切换多语言
        this.$18n.locale = lang //设置给本地的i18n插件
        this.$message.success('切换多语言成功) //提示
        location.reload() //强制刷新页面，防止element组件有些切换不过来
    }
}

配置后端输入页面文字的语言

和后端商量去做，比如返回一个字段修改语言