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 language
  const 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 | es
  locale: getLanguage(),
  // set locale messages
  messages
})
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 = language
    Cookies.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.type
      this.$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.type
      this.$store.dispatch('app/setLanguage', lang)
      this.$message({
        message: lang.name + ':' + 'Switch Language Success',
        type: 'success'
      })
    }
  },
  components: {}
}
</script>

效果图：