1. 首先下载 i18n包
npm install vue-i18n
2. 在src下创建 lang文件夹，存放语言配置文件（index.js），语言包
2.1 语言配置文件 index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.js'
import de from './de.js'
//使用vuex
import store from '../store'
// element-ui 组件国际化
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import deLocale from 'element-ui/lib/locale/lang/de'ElementLocale.i18n((key, value) => i18n.t(key, value))Vue.use(VueI18n)
const messages = {zh: {...zh,...zhLocale},en: {...en,...enLocale},de: {...de,...deLocale}
}
console.log(store.state.langs)const i18n = new VueI18n({messages,locale: store.state.langs, //初始默认中文fallbackLocale: 'zh', // 若某个语言环境变量，则使用fallbackLocale环境下对应的变量silentFallbackWarn: true, // 抑制警告globalInjection: true, // 全局注入silentTranslationWarn: true
})export default i18n2.2 中文包 zh.js
export default {home: {aaa: '登录',bbb: '用户名',ccc: '密码'}
}2.3 英语包 en.js
export default {home: {aaa: 'log',bbb: 'user',ccc: 'passwd'}
}2.4 只需要把语言包引入到语言配置文件中
3. 在store中加入 langs: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh',
4. 在main.js 中引入 import i18n from './lang/index'
5. 在页面切换语言
<template><div><div class="langes"><el-radio-group v-model="radio" @change="changeLangs"><el-radio label="zh">中文</el-radio><el-radio label="en">英文</el-radio><el-radio label="de">德语</el-radio></el-radio-group></div><div class="formBox">{{$t('home.aaa')}}{{$t('home.bbb')}}{{$t('home.ccc')}}</div></div>
</template><script>
export default {data () {return {radio: this.$store.state.langs}},methods: {// 切换语言changeLangs (val) {localStorage.setItem('lang', val) // 存储到本地存储，防止页面刷新返回初始状态this.$i18n.locale = val}}
}
</script><style>
</style>
)
