vue2使用i18n实现中英文多语言切换

---

前言

使用vue2 + elementUI + i18n实现中英文多语言切换

---

一、Vue i18n是什么？

我也不知道，官网说 Vue I18n 是 Vue.js 的国际化插件。
项目里面的中英文等多语言切换会使用到这个东西
Vue I18n 官网https://kazupon.github.io/vue-i18n/zh/
elementUI国际化使用

二、使用步骤

1.安装

在你的vue2项目里面使用npm进行下载：
注意：vue2需要用8版本，用最新的会报错

npm install vue-i18n // 默认安装最新版本

npm i vue-i18n@8.27.0 -D //8版本

npm i vue-i18n@8 --save //或者这个8版本

2.使用

1、在src下创建以下目录及文件

---

2、文件代码

需要多少种语言，就创建多少个js文件，里面的属性名一样，修改对应的属性值即可

cn.js中文文件

import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
const cn = {
    article: {
        text:'早上好，今天天气真好，祝你有个美好的一天。好好学习，天天向上。'
    },
    placeholder:'请选择',
    HelloWorld: {
      open:{
        button:'点击打开对话框'
      },
      title:'这是中文标题',
      cancel:'返回',
      confirm:'确认',
      close:{
        title:'确认关闭？',
      },
      tips:'提示'
    },
    ...zhLocale //这里引入element语言包目的是在切换语言的时候，element的组件里面的文字能跟随切换
}
// 导出
export default cn;

---

en.js英文文件

import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包
const en = {
    article:{
      text:'Good morning, the weather is really nice today. Wishing you a wonderful day. Study hard and make progress every day.'
    },
    placeholder:'Please select',
    HelloWorld: {
      open:{
        button:'Click to open Dialog'
      },
      title:'This is the English title',
      cancel:'Cancel',
      confirm:'Confirm',
      close:{
        title:"Are you sure it's closed?",
        cancel:'Cancel',
        confirm:'Confirm',
      },
      tips:'tips'
    },
    ...enLocale //这里引入element语言包目的是在切换语言的时候，element的组件里面的文字能跟随切换
}
export default en;

---

ko.js韩文文件

import koLocale from 'element-ui/lib/locale/lang/ko' //引入element语言包
const ko = {
    article: {
        text:'좋은 아침, 오늘 날씨 정말 좋아요, 좋은 하루 되세요.열심히 공부해서 날마다 향상하다.'
    },
    placeholder:'선택하십시오.',
    HelloWorld: {
      // 下面这里韩语加英语主要是不想一个个翻译，使用的时候根据情况翻译再填写即可
      open:{
        button:'不想翻译韩语Click to open Dialog'
      },
      title:'不想翻译韩语This is the English title',
      cancel:'韩语Cancel',
      confirm:'韩语Confirm',
      close:{
        title:"不想翻译韩语Are you sure it's closed?",
      },
      tips:'不想翻译韩语tips'
    },
    ...koLocale //这里引入element语言包目的是在切换语言的时候，element的组件里面的文字能跟随切换
}
export default ko;

---

index.js文件

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

---

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 || 'en', //初始未选择默认 cn 中文
    // locale: localStorage.getItem('lang') || 'cn', //初始未选择默认 cn 中文
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
export default i18n

---

3、在main.js文件里面引入

main.js文件

import Vue from 'vue'
import App from './App.vue'
// 导入i18n
import i18n from './i18n/i18n';

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n, // 这里记得也要加上
  render: h => h(App)
}).$mount('#app')

---

4、在组件里面使用

home.vue

<template>
  <div>
    <div>
      <div>“下拉框选择不同的语言--这句话没做转换”</div>
      <el-select 
      	style="margin: 20px 0px;" 
      	@change="langChange" 
      	:placeholder="$t('placeholder')" 
      	v-model="languageVal">
        <el-option 
        	v-for="item in options" 
        	:key="item.value" 
        	:label="item.label" 
        	:value="item.value">
        </el-option>
      </el-select>
    </div>
    <div style="margin: 20px 0px;">
    	<!-- 第一种用法 -->
        {{$t('article.text')}}
    </div>
    <div>
      <el-button type="primary" @click="dialogVisible = true">
      	{{$t('HelloWorld.open.button')}}
      </el-button>
		<!-- 第二种用法 写在v-bind的属性上面 -->
      <el-dialog 
      	:title="$t('HelloWorld.tips')" 
      	:visible.sync="dialogVisible" 
      	width="30%" 
      	:before-close="handleClose">
        <span>{{$t('HelloWorld.title')}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">
          	{{$t('HelloWorld.cancel')}}
          </el-button>
          <el-button type="primary" @click="dialogVisible = false">
          	{{$t('HelloWorld.confirm')}}
          </el-button>
        </span>
      </el-dialog>
    </div>
    <div style="margin: 20px 0px;">
      下面的需要刷新页面才会改变--第三种用法
    </div>
    <div>{{refresh}}</div>
  </div>
</template>
<script>
  export default {
    name: 'Home',
    data() {
      return {
      	refresh: this.$t('refresh'), // 第三种用法，不过这种用法在切换预言时，需要刷新页面才会生效
        dialogVisible: false,
        languageVal:this.$i18n.locale,
        options: [{
          value: 'cn',
          label: '中文'
        }, {
          value: 'en',
          label: 'English'
        }, {
          value: 'ko',
          label: '한국어'
        }]
      }
    },
    methods: {
      //语言切换
      langChange(e) {
        localStorage.setItem('lang', e);
        this.$i18n.locale = e;
        // window.location.reload() // 第三种用法刷新页面
      },
      handleClose(done) {
        this.$confirm(this.$t('HelloWorld.title'))
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

参考https://blog.csdn.net/weixin_38289645/article/details/84950426