vue-admin-template项目实现中英文切换

实现效果：在这里插入图片描述

1.安装

*注意版本号

npm install vue-i18n@8.24.5 -S

2.新建文件夹

在src目录下新建lang文件夹，里面有3个文件
在这里插入图片描述

//	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' 
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from './en'
import zhLocale from './zh'Vue.use(VueI18n)const i18n = new VueI18n({locale: Cookies.get('language') || 'zh', // set localemessages:{en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale}}
})export default i18n

en.js 和 zh.js是页面中需要翻译的内容

在这里插入图片描述

3.在utils下面新建i18n.js文件

在这里插入图片描述

// i18n.js
export function generateTitle(title) {const hasKey = this.$te('route.' + title)// $t :this method from vue-i18n, inject in @/lang/index.jsconst translatedTitle = this.$t('route.' + title)if (hasKey) {return translatedTitle}return title
}

4. 配置main.js

添加以下代码

import i18n from './lang'
Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)
})
new Vue({el: '#app',router,store,i18n,render: h => h(App)
})

5. 配置store文件夹里面的文件

在这里插入图片描述

app.js
state里面增加

language: Cookies.get('language') || 'zh',

mutations里面增加

// 中英文
SET_LANGUAGE: (state, language) => {state.language = languageCookies.set('language', language)
},

actions里面增加

// 中英文setLanguage({ commit }, language) {commit('SET_LANGUAGE', language)},

getters.js
getters里面增加
```
language: state => state.app.language,
```

6. 设置语言版本页面使用

页面中使用 $t('')来渲染

 <template><div class="app-container"><div class="main-min"><span class="title">{{$t('set.languageSetting')}}</span><div class="radio"><el-radio-group v-model="radio" @input=langInput><el-radio label="zh" border>{{$t('set.Chinese')}}</el-radio><el-radio label="en" border>{{$t('set.English')}}</el-radio></el-radio-group></div></div></div>
</template><script>
export default {data() {return {radio: 'zh',}},created(){// 获取当前语言版本使用  this.$store.getters.languagethis.radio = this.$store.getters.language},methods: {langInput(lang){this.$i18n.locale = langthis.$store.dispatch('app/setLanguage', lang)this.$message({message: lang=='en' ? 'switch language success' : '切换成功',type: 'success'})}}
}
</script><style lang="scss">
// 页面样式
</style>