vue国际化的简单记录

前言

前段时间维护了一个使用国际化的项目,在此记录一下

vue 环境下

装vue-i18n依赖（6版本，9版本以上vue3 也可以使用）
npm install vue-i18n@6.x

i18n.js文件

import Vue from 'vue';
import Vuei18n from 'vue';
Vue.use(Vuei18n);

//引入各语言模块配置文件
import cn from './cn';
import en from './en';

// 创建vue-i18n实例
const i18n = new Vuei8n({
    locale:'cn',//默认语言
    messages:{ //添加多语言
       cn,
       en
    }
})
export default i18n;

main.js文件

import i18n from './util/i18n'
new Vue({
  ...,
  i18n,
  render: h => h(App)
}).$mount('#app')

cn.js中文配置文件

const cn = {
  name:"名字",
  nameObj:{
    obj:"对象"
  }
}
export default cn

en.js英文配置文件

const en = {
  name:"name",
  nameObj:{
    obj:"obj"
  }
}
export default en

切换语言/使用

<div>{{$t('name')}}</div>
<div>{{this.$t('name')}}</div>
<div>{{$t('nameObj.obj')}}</div>
//切换
this.$i18n.locale = 'cn/en...'

vue+element-ui环境下

langs文件\ en.js、cn.js、index.js(导出en,cn)

en.js
//导入elementUi中默认英文配置,下面也只是将两者合并而已
import enLocale from "element-ui/lib/locale/lang/en";
const en = {
   name: "name",
   ...enLocale
}
export default en;

cn.js
//导入elementUi中默认中文配置,下面也只是将两者合并而已
import cnLocale from "element-ui/lib/locale/lang/cn";
const en = {
   name: "名字",
   ...cnLocale
}
export default cn;

i18n.js

import Vue from "vue";
import locale from 'element-ui/lib/locale'
import VueI18n from "vue-i18n";
import messages from "./langs/index";

Vue.use(VueI18n);
// 创建vue-i18n实例
const i18n = new VueI18n({
  locale: localStorage.lang || "cn", //后期自动切换
  messages
});
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n;

main.js 文件

import i18n from './i18n'
import ElementUI from 'element-ui';

// element-ui 为了兼容vue-i18n@6.x
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
});

new Vue({
  ...,
  i18n,
  render: h => h(App)
}).$mount('#app');

使用同上