[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總結

　　按照步驟來，注意細節