前言
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:'法妮' ,
  ...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 {
  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总结
一定要细心,按照步骤来