vue整合vue-i18n最新版本實現國際化

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
})

//例項化物件
const i18n = new VueI18n({
        locale: Cookies.get('locale') || 'en', // 語言標識
        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
        }
    })
    //暴露i180
export default i18n;

4.語法

//vue元件模板的使用
<div>{{$t('language.en')}}</div>
 
//vue元件模板資料繫結的使用
<input :placeholder="$t('language.en')"></input>
 
//vue元件data中賦值的使用
data:{
 msg:this.$t('language.en');
}

5.效果