【vue+vue-i18n插件】实现vue项目中英文切换

了解一款插件，看文档很重要
文档地址请戳这里，跳转Vue I18n官方文档

当vue项目中需要中英文切换，借助插件去实现，没有很难的技术

一、安装

npm install vue-i18n

二、全局引入，在main.js中引入

import Vue from 'vue'   //一般main.js中都有这一行
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'   //导入element-ui的英文文件
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'  //导入element-ui的中文文件
Vue.use(VueI18n)
const i18n=new VueI18n({
    locale:localStorage.getItem('languageSet')||'zh',  
     //从localStorage里获取用户中英文选择，
    没有则默认中文,一定要有默认语言，
    不然新设备访问的时候，localStorage中没有值就会出现bug
    messages:{
        'zh': {
          ...require('./components/lang/zh'),
          ...cnLocale
        },
        'en': {
          ...require('./components/lang/en'),
          ...enLocale
        }
    }
})
//element官方方法 //为了实现element插件的多语言切换
Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value),
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App),
})

三、src目录下新建lang文件夹，在zh.js 、en.js文件中编写需要变化的数据，zh.js和en.js内容，key一定要对应，在页面上可以直接使用js中定义的数据
en.js

export default {
  role: {
    roleCode: 'RoleCode',
    roleName: 'RoleName',
    createDate: 'CreateDate',
    roleType: 'RoleType',
    roleDesc: 'RoleDesc'
  }
}

zh.js

export default {
  role: {
    roleCode: '角色编码',
    roleName: '角色名称',
    createDate: '创建时间',
    roleType: '角色类型',
    roleDesc: '角色描述',
   
  },
 
}

**

ps : index.js用不到，可不考虑，仅供自己复习用

**

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
//引入element 自带的语言包
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 enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  },
  es: {
    ...esLocale,
    ...elementEsLocale
  }
}
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 'en'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})

export default i18n

四、在页面中开始使用

      <div class="switchLag">
        <svg-icon class="switchIcon" v-show="language == 'en_US'" class-name="英文" icon-class="英文" @click="changeLage('en')"></svg-icon>
        <svg-icon class="switchIcon" v-show="language == 'zh_CN'" class-name="中文" icon-class="中文" @click="changeLage('zh')"></svg-icon>
      </div>  

.switchLag {
  .switchIcon {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
}

  language: this.$store.state.user.language,

i18n 是在main.js中VueI18n变量的实例对象
locale 是 i18n 设置的默认语言
zh en 是设置的语言变量

  // 中英文切换
    changeLage(v) {
      if (v == 'en') {
        this.$i18n.locale = 'zh'
        //因为切换语言的关系，可以将语言标识保存在localStorage中，
        记得一点就是一定要有默认语言，不然新设备访问的时候，localStorage中没有值就会出现bug
        localStorage.setItem('languageSet', this.$i18n.locale)
        this.language = 'C'
      } else {
        this.language = 'E'
        this.$i18n.locale = 'en'
        localStorage.setItem('languageSet', this.$i18n.locale)
      }
      const data = {
        userId: xxx.userId,
        language: this.language,
        userName: xxx.name,
        nickName: xxx.nickName,
        // 中英文（中文C  英文N）
      }
      setLanguage(data).then(res => {    
      this.language = res.data.language
      })
   
    },

五、使用en.js中定义的数据

            <el-input
              v-model="modelName"
              :placeholder="$t('flowModel.name')"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 10px"
              class="filter-item"
           
            >
            </el-input>

          <el-table-column :label="$t('role.id')" prop="id" 
          align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('role.roleCode')" prop="roleCode" 
          align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.roleCode}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('role.RoleName')" prop="RoleName" 
          align="center" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.RoleName}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('role.createDate')" prop="createDate" 
          align="center">
            <template slot-scope="scope">
              <span>{{ getNickName(scope.row.createDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('role.roleDesc')" prop="roleDesc" 
          align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.roleDesc }}</span>
            </template>
          </el-table-column>

六、 关于language: this.$store.state.user.language，language的值要存到vuex中，每次登录获取到用户信息后，要从里面拿这个language的值

state：{
    language:''

},
mutations:{
    SET_LANGUAGE: (state, name) => {
      state.language = name
    },
},
actions:{
   // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token)
          .then(res => { 
   const user = res.user
       commit('SET_LANGUAGE', user.language)
 })
          .catch(error => {
            reject(error)
          })
      })
    },

}