vue+elementUI+vue-i18n实现国际化

 

1.安装: npm install vue-i18n

2.vue.js+vue-i18n+elementUI国际化配置
在main.js同级建i18n文件夹，并里面建i18n.js、langs文件夹，langs文件夹下建en.js、cn.js
目录如下:

 i18n/i18n.js

//i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import messages from './langs'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'zh-cn',
  messages
})

locale.i18n((key, value) => i18n.t(key, value)) //实现element插件的多语言切换

export default i18n

i18n/index.js 

import en from './en'
import cn from './cn'
export default {
  'en':en,
  'zh-cn':cn
}

i18n/en.js

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

i18n/cn.js

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

在main.js中引用国际化文件

import Vue from 'vue'
import i18n from './i18n/i18n'
import App from './App'
import router from './router'
import store from './store/index'
import ElementUi from 'element-ui'

Vue.use(ElementUi)

new Vue({
  el: '#app',
  i18n,
  router,
  store,
  components: { App },
  template: '<App/>'
})

这样就完成了国际化

3.在组件中使用国际化

//第一种
<span v-text="$t('login.login)"></span>

//第二种
<span>{{$t('login.login')}}</span>

4.在js中使用

this.$t('login.login')

5.语言切换

<el-select v-model="lang" @change="changeLang">
        <el-option label="简体中文" value="zh-cn"></el-option>
        <el-option label="English" value="en"></el-option>
</el-select>

changeLang(v){
 localStorage.setItem("lang",v);//记录语言
 this.$i18n.locale = v;
}