分享一個本身寫的vue多語言插件smart-vue-i18n

前言

目前有比較成熟的方案（vue-i18n）瞭解了下，而且實用了一下感受對於我在使用的項目來講略顯臃腫,功能比較多，因此壓縮的會比較大，在移動端不太適合因此本身花一天時間擼了一個vue多語言插件，壓縮後大小不超過2kb

使用方法

經過Vue.js公開方法install安裝,參數 lang 爲初始化默認語言,參數 messages 爲初始語言庫,也能夠在組件中新增多語言,語言庫格式參照其餘開源的國際化項目

安裝

github地址: smart-vue-i18n

yarn add smart-vue-i18n
複製代碼

初始化

// 插件方式引用
// messages 爲語言庫
import { messages } from '@/utils/i18n-message/open-account/apply/index.js'
import i18n from 'smart-vue-i18n'

Vue.use(i18n, {
    lang: 'zhCHT',
    messages
})
複製代碼

語言庫格式

// 語言庫格式
import { zhCHS } from './zh-chs'
import { zhCHT } from './zh-cht'

export const messages = {
    //簡體中文
    zhCHS,
    //繁體中文
    zhCHT
}

// './zh-chs'
export const zhCHS = {
    personalInfo: '我的資料',
}

// './zh-cht'
export const zhCHT = {
    personalInfo: '個人資料',
}
複製代碼

組件內使用

直接在組件內定義i18n多語言源 而後能夠在頁面使用切換語言能夠不用刷新頁面 方法 this.$i18n.setLang('zhCHS')組件內js使用 this.$t('personalInfo')組件內html使用 $t('personalInfo')

<template lang="pug">
yx-container.apply-home
    .apply-main(slot="main")
        .personalInfo {{$t('personalInfo')}}
        .apply-main-add-credit(@click="testHandler") {{$t('test.a')}}
</template>

<script>
export default {
    i18n: {
        zhCHS: {
            test: {
                a: '簡體'
            }
        },
        zhCHT: {
            test: {
                a: '簡體'
            }
        }
    },
    methods: {
        testHandler() {
            this.$i18n.setLang(this.$i18n.lang === 'zhCHS' ? 'zhCHT' : 'zhCHS')
            console.log(this, this.$i18n.lang)
        }
    }
}
</script>
複製代碼

原理解析

核心代碼

const _vm = new Vue({
    data: options
})
Object.defineProperty(Vue.prototype.$i18n, 'lang', {
    get() {
        return _vm.lang
    }
})
複製代碼

將多語言掛載到vue原型上 而後 Object.defineProperty 監聽Vue.prototype.$i18n變化 經過new Vue() 建立實例來實現語言切換實時渲染，能夠不須要刷新頁面

其餘

時間倉促，一些經常使用的功能暫時沒有，後續加上

歡迎使用並提出意見