[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哦

fannie总结

  按照步骤来,注意细节

 

posted @ 2020-03-16 15:34  FannieGirl  阅读(1214)  评论(0编辑  收藏  举报