【vue 进阶指南一】多语言国际化（中英文切换）

vue + element-ui + vue-i18n 多语言国际化

1.element-ui 并不支持最新版的vue-i8n 插件，开发时注意i18n的版本，当然本示例成功解决版本不兼容的问题，详细说明请看element官方文档：http://element-cn.eleme.io/#/zh-CN/component/i18n

2.当前引入模式兼容了element-ui，如果未引入element-ui，请移步：https://segmentfault.com/a/1190000012779120#articleHeader1

教程开始

1.安装 vue-i18n 插件 (默认为最新版)

npm install vue-i18n

2.建立文件夹/文件

在main.js同级建i18n新文件夹，里面新建i18n.js、langs文件夹，langs文件夹下新建en.js、cn.js、index.js;

参照请移步：https://github.com/ahateam/aha-admin-template.git

3.各文件代码

//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)
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  router:{
    'home' : '系统首页',
    'document' : '文档中心',
    'document1':'文档1',
    'document2':'文档2',
    'document3':'文档3',
    'document4':'文档4',
    'document5':'文档5',
    'echarts' : '图表插件',
    'table' : '表格插件',
    'component' : '组件列表',
    'component1' : '组件1',
    'component2' : '组件2',
    'component3' : '组件3',
    'component4' : '组件4',
    'component5' : '组件5',
    'set':'系统设置',
    'set1':'设置1',
    'set2':'设置2',
    'set3':'设置3',
    'set4':'设置4',
    'set5':'设置5',
    'set6':'设置6',
    'set7':'设置7',
  },
  ...zhLocale
}

export default cn;

//en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  router:{
    'home' : 'Home',
    'document' : 'Documente',
    'document1':'Documente1',
    'document2':'Documente2',
    'document3':'Documente3',
    'document4':'Documente4',
    'document5':'Documente5',
    'echarts' : 'Echarts',
    'table' : 'Table',
    'component' : 'Component',
    'component1' : 'Component1',
    'component2' : 'Component2',
    'component3' : 'Component3',
    'component4' : 'Component4',
    'component5' : 'Component5',
    'set':'Set Center',
    'set1':'Set 1',
    'set2':'Set 2',
    'set3':'Set 3',
    'set4':'Set 4',
    'set5':'Set 5',
    'set6':'Set 6',
    'set7':'Set 7',
  },
  ...enLocale
}

export default en;

//index.js
import en from './en';
import cn from './cn';
export default {
  en: en,
  cn: cn
}

//main.js  中插入 import i18n from './i18n/i18n'   并在vue实例中挂载
//main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import Echarts from 'echarts'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

import i18n from './i18n/i18n'



Vue.prototype.$echarts = Echarts
Vue.config.productionTip = false

Vue.use(ElementUI)



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

4.使用示例

//在一个组件中 通过{{$t('router.document')}}  引用

<template>
    <div>
      <p>{{$t('router.document')}}</p>
    </div>
</template>

<script>
    export default {
        name: "Lang",
    }
</script>

<style scoped>

</style>

更改中英文显示方式

//在任意组件中加入按钮  改变 this.$i18n.locale 对应的值就行 'en'表示英文，'cn'表示中文

 <el-button type="success" @click="switchLang()">更换语言</el-button>
   
<script>
    methods:{
          switchLang()  {
            if(this.$i18n.locale == 'en'){
              this.$i18n.locale = 'cn'
            }else{
              this.$i18n.locale = 'en'
            }
          }
        },
</script>

【vue 进阶指南 一】多语言国际化（中英文切换）