vue2.0国际化配置（配置中文和英文）

一、安装 Vue-i8n

npm install vue-i18n --save

 注意：-save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。

            -save是指将包信息添加到dependencies，表示你发布时依赖的包裹。

二、配置多语言文件

        在src文件夹中新建文件夹lang，其包含三个文件：index.js、zh.js、en.js。

1、index.js

import Vue from 'vue' //引入vue
import VueI18n from 'vue-i18n'  //引入vue的国际化插件
import Cookies from 'js-cookie' //我这里需要，所以引入轻量级的处理cookies的js
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'     //本地创建的中文环境配置文件
import enLocale from './en'     //本地创建的英文环境配置文件
 
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
 
const messages = {
    en: {
        ...enLocale,
        ...elementEnLocale
    },
    zh: {
        ...zhLocale,
        ...elementZhLocale
    }
}
//获取当前语言环境，通过后台返回的语言或者浏览器语言环境
export function getLanguage() {
    const chooseLanguage = Cookies.get('language')//取后台设置的语言
    if (chooseLanguage) return chooseLanguage
    //如果后台没有返回语言则根据浏览器的语言环境返回语言变量
    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 'en'
}
const i18n = new VueI18n({
    //语言标识 this.$i18n.locale 通过切换locale的值来实现语言切换
    //如：this.$i18n.locale='en' 直接切换成英文，仅限于配置了语言的一些变量
    locale: getLanguage(),//调的上边这个函数
    messages              //上边配置的语言标识对应的不同配置
})

export default i18n

2、zh.js

export default {
    login: { // 登录模块
        title: '系统登录',
        loginName: '用户名',
        loginNamePlaceholder:'请输入用户名',
        password: '密码',
        passwordPlaceholder:'请输入密码',
        logIn: '登录',
    },
}

3、en.js

export default {
    login: { // 登录模块
        title: 'WMS system',
        loginName: 'loginName',
        loginNamePlaceholder:'Please enter the user name',
        password: 'passward',
        passwordPlaceholder:'Please enter your password',
        logIn: 'login',
    },
}

三、在main.js中引入

main.js（引入i18n 的代码）

import i18n from './lang'  

 Vue.use(ElementUI,{
  i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})

new Vue({
  i18n,
})

四、使用（自定义组件，方便使用，也可不定义直接使用）

1、src=>components=>LangSelect=>index.vue

<template>
    <el-dropdown trigger="click"  @command="handleSetLanguage">
        <div class="select-language"><img src="@/assets/language.jpg" alt=""></div>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language==='zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
</template>
<script>
export default {
    computed: {
      language() {
        return this.$store.state.app.language
      }
    },
    mounted(){
        // console.log('000',this.$store.state.app.language)
    },
    methods: {
      handleSetLanguage(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch('app/setLanguage', lang)
        this.$message({
          message: 'Switch Language Success',
          type: 'success'
        })
      }
    }
}
</script>
<style>
.select-language img {
    height: 30px;
}
</style>

2、在登录页面使用组件

<template>
  <div class="login">
     <lang-select class="set-language " />
  </div>
</template>
<script>

import LangSelect from '@/components/LangSelect/index.vue'

export default {
  components: {
    LangSelect
  },
};
</script>

如有不足 请大方指出。