vue中使用element的i18n语言转换(保姆式教程-保证能用)

话不多说，先看效果:预览地址: https://sandm00.github.io/i18n-switch/#/
1、项目中需要使用的插件，vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用

npm i element-ui -S
npm i js-cookie -S
npm i vue-i18n@8.28.2  //因为我项目使用的vue2，直接安装报错了,就下载了固定的版本

2、在main.js中引入i18n

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';//引入element
import 'element-ui/lib/theme-chalk/index.css';//引入element样式
import i18n from './lang'//引入语言包
Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({router,store,i18n,render: h => h(App)
}).$mount('#app')

3、创建lang文件夹，然后对应的js语言文件
在这里插入图片描述
index文件是处理语言切换的文件

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
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'
import jaLocale from './ja'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale},es: {...esLocale,...elementEsLocale},ja: {...jaLocale,...elementJaLocale}
}
export function getLanguage() {const chooseLanguage = Cookies.get('language')if (chooseLanguage) return chooseLanguage// if has not choose languageconst language = (navigator.language || navigator.browserLanguage).toLowerCase()const locales = Object.keys(messages)for (const locale of locales) {if (language.indexOf(locale) > -1) {return locale}}return 'zh'
}
const i18n = new VueI18n({// set locale// options: en | zh | eslocale: getLanguage(),// set locale messagesmessages
})
export default i18n

zh.js文件，中文语言包

export default {hello: {title: "欢迎进入vue+node后台管理系统"},about:'这是about页面'}

en.js 英文语言包

export default {hello: {title: "Welcome to the Vue+node backend management system"},about: 'This is an about page'}

其他的语言类似以上操作，创建xx.js的文件，在lang文件夹下面的index.js引入并且在messages里面使用即可
在这里插入图片描述
因为要在最外层切换，所以需要使用vuex，又想刷新语言不丢失，可以保存在本地
在store里面创建app.js模块

import Cookies from 'js-cookie'
import { getLanguage } from '@/lang/index'const state = {language: getLanguage(),
}const mutations = {SET_LANGUAGE: (state, language) => {state.language = languageCookies.set('language', language)},
}const actions = {setLanguage({ commit }, language) {commit('SET_LANGUAGE', language)},
}export default {namespaced: true,state,mutations,actions
}

然后在index.js引入模块即可
在页面中进行语言切换

<el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>{{ $t('hello.title') }}    //使用的语言包btnList: [{name: '中文',type: 'zh'},{name: 'English',type: 'en'},{name: 'Español',type: 'es'},{name: '日本語',type: 'ja'}]
//方法handleClick(lang) {this.$i18n.locale = lang.typethis.$store.dispatch('app/setLanguage', lang.type)this.$message({message: lang.name + ':' + 'Switch Language Success',type: 'success'})}

详细页面代码

<template><div class="home"><el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>{{ $t('hello.title') }}<router-link to="/about">about</router-link><router-view></router-view></div>
</template>
<script>
export default {name: 'Home',data() {return {btnList: [{name: '中文',type: 'zh'},{name: 'English',type: 'en'},{name: 'Español',type: 'es'},{name: '日本語',type: 'ja'}]}},methods: {handleClick(lang) {this.$i18n.locale = lang.typethis.$store.dispatch('app/setLanguage', lang)this.$message({message: lang.name + ':' + 'Switch Language Success',type: 'success'})}},components: {}
}
</script>

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