vue进阶之路|vue+vue-i18n+element实现多语言

前言

vue+vue-i18n实现多语言

本文主要内容

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

安装

npm install vue-i18n

配置

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;

main.js (引用i18n)

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

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

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:'法妮' ，
&emsp;&emsp;...zhLocale      
}
export default  cn

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 {
&emsp;&emsp;langType:'',
 }; },
 methods:{ 
changeLangType(type){ 
localStorage.setItem('locale',type);
 this.$i18n.locale = type; 
}
 } 
};
 </script>

elementUI 内置国际化

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

写在cn.js 中
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
...zhLocale

踩到的坑以及解决方案

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

解决方案：

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

fannie总结

一定要细心，按照步骤来