vue整合vue-i18n最新版本实现国际化兼容elementui

欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记 https://notes.xiyankt.com

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

1安装vue-i18n

npm install vue-i18n --save-dev

2.语言包文件

en.js

//英语
const en = {
    //切换语言
    language: {
        ar: 'Arabic',
        en: 'English',
        es: 'Spain',
        pt: 'Arabic',
    },
    //路由
    router: {
        title: {
            dashboard: 'Account',
            product: 'Product',
            order: 'Order',
            setting: 'Setting',
            logout: 'Logout'
        },
    },
    //所有卡片标题
    card: {
        title: {
            account: 'Account',
            events: 'Pending Events',
            devices: 'Devices',
            order: 'Order',
            password: 'Set password',
            renewal: 'Set Automatic renewal',
            information: 'Order Information',
            method: 'Payment Method',
        },
    },
    //用户界面
    account: {
        info: {
            name: "Name",
            email: "Email",
            service: "Service",
            remaining: "Remaining days",
            renewal: "Continue renewal status",
            createTime: "Create Time",
        },
        events: {
            remark1: "You have",
            remark2: "To be paid Order"
        },
        devices: {
            browser: "Browser",
            system: "System",
            language: "Language",
            loginTime: "Login Time"
        },
        buttom: {
            value: "PayNow"
        }
    }
}
export default en;

ar.js

// 阿拉伯语
const ar = {
    language: {
        ar: ' عربي ، ',
        en: 'الإنجليزية ،',
        es: 'أسبانيا',
        pt: ' عربي ،',
    },
    router: {
        title: {
            dashboard: 'حساب',
            product: 'برودكشن',
            order: 'أمر',
            setting: 'إعداد',
            logout: 'شطب'
        },
    },
    card: {
        title: {
            account: 'حساب',
            events: 'حدث غير محدد',
            devices: 'معدّات',
            order: 'أمر',
            password: 'تعيين كلمة المرور',
            renewal: 'مجموعة التجديد التلقائي',
            information: 'معلومات النظام',
            method: 'شروط الدفع',
        },
    },
    //用户界面
    account: {
        info: {
            name: "الاسم الكامل",
            email: "الايميل",
            service: "الايميل",
            remaining: "الأيام المتبقية",
            renewal: "استمرار حالة الاشتراك",
            createTime: "خلق الوقت",
        },
        events: {
            remark1: "لديك",
            remark2: "أمر الدفع"
        },
        devices: {
            browser: "براوزر",
            system: "نظم",
            language: "لغوي",
            loginTime: "وقت الدخول"
        },
        buttom: {
            value: "نقد"
        }
    }
}
export default ar;

3.main.js详细配置文件

import Vue from 'vue'

// 移动端适配
import 'lib-flexible/flexible'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
//引入i180
import VueI18n from 'vue-i18n'

//引入cookie
import Cookies from 'js-cookie'

//引入各个语言的配置
import en from './i18n/config/en';
import es from './i18n/config/es';
import ar from './i18n/config/ar';
import pt from './i18n/config/pt';

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css';
//引入各个elementui的语言包
import arLocale from 'element-ui/lib/locale/lang/ar' //阿拉伯语 
import enLocale from 'element-ui/lib/locale/lang/en' //英语
import esLocale from 'element-ui/lib/locale/lang/es' //西班牙 
import ptLocale from 'element-ui/lib/locale/lang/pt' //葡萄牙 
import locale from 'element-ui/lib/locale'


//引入jquery的爱心js
// import love from "@/api/love";

import '@/styles/index.scss' // global css


import './assets/icon/iconfont.css'
import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control

//挂载
Vue.use(VueI18n)

//挂载elementui语言包
Vue.use(ElementUI, {
    locale
})

//设置默认语言标识并写入到Cookies中
const initLocale = Cookies.get('locale') || 'en';
let lang = ''
if (initLocale == "en") {
    lang = 'en'
    Cookies.set('locale', lang);
}

//实例化对象
const i18n = new VueI18n({
        locale: Cookies.get('locale') || lang, // 语言标识
        messages: {
            en: Object.assign(en, enLocale), //英语
            es: Object.assign(es, esLocale), //西班牙 
            ar: Object.assign(ar, arLocale), // 阿拉伯语 
            pt: Object.assign(pt, ptLocale) //葡萄牙 
        }
    })
    //ui组件的语言自动切换
locale.i18n((key, value) => i18n.t(key, value))

Vue.config.productionTip = false
new Vue({
    el: '#app',
    i18n,
    router,
    store,
    template: '<App/>',
    components: {
        App
    }
})

4.语法

//vue组件模板的使用
<div>{{$t('language.en')}}</div>
 
//vue组件模板数据绑定的使用
<input :placeholder="$t('language.en')"></input>
 
//vue组件data中赋值的使用
data:{
 msg:this.$t('language.en');
}

5.效果