[vue系列]-vue+vue-i18n+elementUI 国际化

前言

　　vue+vue-i18n实现多语言

本文主要内容

1. 安装
2. 多语言配置
3. element 内置语言国际化
4. 踩到的坑以及解决方案

安装

npm install vue-i18n

配置

1.i18n.js

import Vue from 'vue';

  import locale from 'element-ui/lib/locale';

import VueI18n from 'vue-i18n';

import en from './langs/en';
import sc from './langs/cn';
import tc from './langs/tc';

Vue.use(VueI18n);
const i18n = new VueI18n({
  //locale: localStorage.lang || 'en',
  locale: localStorage.getItem('localize_lang') || 'en',
  messages: {
    sc, //中文
    en, //英文
    tc  //繁体
  }
});

locale.i18n((key, value) => i18n.t(key, value)); //重点：为了实现element插件的多语言切换

export default i18n;

2.main.js (引用i18n)

 

import Vue from 'vue';
import i18n from './i18n/i18n';

new Vue({
  el: '#app',
  i18n
});

3.langs 建立新文件夹 主要用来存放语言文件

你有多少种语言就添加多少

　　

// en.js
const en ={
   name:'fannie'         
}
export default  en 

// cn.js

  import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

const cn ={
   name:'法妮' ，
　　...zhLocale      
}
export default  cn 

4.demo.vue (组件内应用)

<template>
<div>{{$t('name')}}</div>
<el-select v-model="langType" class="changeLangType" size="mini" @change="changeLangType">
          <el-option value="en" label="English"></el-option>
          <el-option value="cn" label="中文简体"></el-option>
          <el-option value="tc" label="中文繁體"></el-option>
    </el-select> 
</template>
<script>
export default {
  data(){
    return {

　　langType:'',

 }; },
 methods:{ 
changeLangType(type){ 
localStorage.setItem('locale',type);
 this.$i18n.locale = type; 
}
 } 
};
 </script>

elementUI 内置国际化

打开element官网，里面有国际化的文档。可以查看现在官网支持多少种语言

import zhLocale from 'element-ui/lib/locale/lang/zh-CN';

...zhLocale

写在cn.js 中

 

踩到的坑以及解决方案

1.Value of key 'xxx' is not string!
Cannot translate the value of keypath 'xxx'. Use the value of keypath as default.

 

 

 解决方案：

1. 可能是你字符没有声明，找不到。
2. 引用配置这些地方有问题 仔细对照一下，比如引用路径 比如在mian.js 中是否导入了
3. 一定要写messages哦
4. 

fannie总结

　　按照步骤来，注意细节