vue-i18n 国际化语言切换

vue-i18n 国际化语言切换

1.安装vue-i8n

npm install vue-i18n --save

2.src目录下创建文件夹 i18n

—— src
|
—— i18n
|———— langs
|—————— cn.js
|—————— en.js
|—————— index.js
|———— i18n.js

3. cn.js

import enLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  login: {
    'btn': '登录'
  },
  ...enLocale
}
export default cn

4. en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  login: {
    'btn': 'Login'
  },
  ...enLocale
}
export default en

5. index.js

import en from './en' // 英语
import cn from './cn' // 中文
export default {
  en: en,
  cn: cn
}

6. i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

7. src下main.js

import i18n from './i18n/i18n'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

示例

<!-- i18n -->
<template>
  <div>
    <span>{{$t('login.btn')}}</span>
    <el-select v-model="selectValue" @change="langChange" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectValue: '',
      options: [
        {
          value: 'cn',
          label: '中文'
        }, {
          value: 'en',
          label: 'English'
        }
      ]
    }
  },
  created () {
    let that = this
    console.log(localStorage.lang)
    that.selectValue = localStorage.lang == undefined ? 'cn' : localStorage.lang
  },
  methods: {
    // 语言切换
    langChange (e) {
      // console.log(e)
      localStorage.setItem('lang', e)
      this.$i18n.locale = e
    }
  }
}
</script>