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 i18n
2.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>