vue2 + element-ui 使用vue-i8n实现国际化

 

1.安装依赖vue-i8n

注：版本安装8.27.0  超过9会报错

npm i [email protected] --save

2.创建语言包文件

在src目录下创建一个lang文件夹，在lang文件下创建zh.js(中文)，en.js(英文)语言包js文件，并创建一个index.js文件，用来整合语言包

zh.js

export default {
    // 登录页面文字
    loginPage: {
        login: '登录',
        userLogin:'用户登录',
        remeber:'记住用户名和密码'
    },
}

en.js

export default {
    // 登录页面文字
    loginPage: {
        login: 'Login',
        userLogin: 'User Login',
        remeber: 'Remember user name and password'
    },
}

 index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.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'

ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(VueI18n)
const messages = {
    zh: {
        ...zh,
        ...zhLocale
    },
    en: {
        ...en,
        ...enLocale
    },
}
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

vuex文件

在src目录下创建store文件夹,在store文件下创建index.js

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    //定义数据，相当于data
    state: {
        langs: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh'
    },
    //相当于vuex的计算属性
    getters: {
    },
    //里面定义方法，操作state方发（同步）
    mutations: {
        setLangInfo(state, val) {
            state.langs = val
        },
    },
    // 操作异步操作mutation（异步）
    actions: {
    },
    //模块化
    modules: {
    },
})

3.main.js

//引入语言包
import i18n from './lang/index'
//引入Vuex
import store from './store'

//挂载到vue实例上
new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')

4.创建中英文切换组件

<template>

    <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-group>
    </div>

</template>

<script>
export default {
  name: 'langePage',
  data() {
    return {
      radio: this.$store.state.langs,
    }
  },

  methods: {
    changeLangs(val) {
      this.$nextTick(() => {
        this.$store.commit('setLangInfo', val) 
        localStorage.setItem('lang', val) // 存储到本地存储，防止页面刷新返回初始状态
        this.$i18n.locale = val
      })
    },
  },
}
</script>

<style scoped>
.langes {
  position: fixed;
  top: 20px;
  right: 60px;
  z-index: 10000;
}
</style>

5.在页面模板使用

   <div class="formBox">
        <div class="userLogin">{
   
   { $t('loginPage.userLogin') }}</div>
        <el-input
          prefix-icon="el-icon-user"
          v-model="loginInfo.userName"
        >
        </el-input>
        <el-input
          style="margin-top: 20px"
          type="password"
          prefix-icon="el-icon-lock"
          v-model="loginInfo.password"
        >
        </el-input>
        <div class="remember">
          <el-checkbox v-model="remember">{
   
   {
            $t('loginPage.remeber')
          }}</el-checkbox>
        </div>

        <div class="submit" @click="submit">{
   
   { $t('loginPage.login') }}</div>
      </div>