vue2项目国际化

1、下包，下包时最好指定版本，有的版本和node不兼容，这里我使用的是8的大版本

npm i vue-i18n@8

2、在src目录下新建文件夹lang，并在lang文件夹新建en.js/zh.js和index.js

// 在en.js中插入英文字段
export default {
    message:{
        acount: 'Acount',
        password: 'Password'

    }
}
// 在zh.js中插入中文片段
export default {
    message:{
        acount: '账号',
        password: '密码'

    }
}
// 在index.js中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang导入Element的语言包 英文
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang g导入Element的语言包 中文
import enLocale from './en' // 导入项目中用到的英文语言包
import zhLocale from './zh'// 导入项目中用到的中文语言包
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
const i18n = new VueI18n({
  locale: sessionStorage.getItem('lang') || 'zh', // 设置语种，使用sessionStorage储存语言标识
  messages, 
})
export default i18n

3、在mian.js中

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/css/element-ui.css'
import i18n from './lang'

Vue.use(ElementUI, {
    size: 'small', // size设置元素默认大小
    i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
  })


const app = new Vue({
  i18n,
  render: (h) => h(App)
})

app.$mount('#app')

4、定义切换语言的button组件，点击按钮对应语言即可完成语言切换

<template>
  <div class="ChannelSelected mr">
    <el-dropdown split-button placement="bottom-start" @command="handleCommand" >
      <span class="el-dropdown-link">
        {{ language }}
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: 'LanguageSelect',
  data() {
    return {
      language: '',
      t: this.$i18n.locale
    }
  },
  created () {
    this.language = this.$i18n.locale === 'zh' ? '中文' : 'English'
  },
  methods: {
    // 根据下拉框的中被选中的值切换语言
    handleCommand(command) {
      if (command === 'zh') {
        this.lang = '中文'
      } else {
        this.lang = 'English'
      }
      console.log(command)
      this.$i18n.locale = command
      // console.log('this.$i18n.locale', this.$i18n.locale)
      sessionStorage.setItem('lang', command)
      // console.log(sessionStorage.getItem('lang'))
      window.location.reload()
    }
  }
}
</script>
<style lang="scss" scoped>
.ChannelSelected {
    ::v-deep {
    .el-dropdown {
        color: white;
    }
    }
  .el-dropdown-link {
    &:hover {
      cursor: pointer;
    }
    }
}

</style>

 5.在项目中如何获取到抽取出来的字段  通过this.$t可以拿到对应的i18 对象

        1.在模板中：{{ $t('message.acount') }}

        2.在js中：this. $t('message.acount')

        3.绑定到属性上时：:label="$t('message.acount')"

        4.在模板字符串中只需在外层加`${his. $t('message.acount')}`即可