2021-08-05

Vue中使用 Ii8n

安装

npm install vue-i18n

在main.js中引用

import VueI18n from ‘vue-i18n’
Vue.use(VueI18n)

创建文件夹 lang （包含三个文件夹）

zh.js

const zh = {
    lang: {
        id: "1",
        name: "张三",
        sex: "男"
    }
}
export default zh

en.js

const en = {
    lang: {
        id: "one",
        name: "Zhang San",
        sex: "man"
    }
}
export default en

index.js

import zh from './zh'
import en from './en'

const i18n = {
    locale: "zh",
    messages: {
        zh: {
            ...zh
        },
        en: {
            ...en
        }
    }
}
export default i18n

在main.js中注册使用

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

在页面中使用

<template>
    <div class="lang">
        <el-button @click="selectLang">{{ showText ? '切换英文':'切换中文' }}</el-button>
        <h3>{{ $t('lang.id') }}</h3>
        <h3>{{ $t('lang.name') }}</h3>
        <h3>{{ $t('lang.sex') }}</h3>
    </div>
</template>
<script>
export default {
    name: 'Lang',
    data() {
        return {
            showText: true
        };
    },
    methods: {
        selectLang() {
            this.showText = !this.showText
            if (this.showText) {
                this.$i18n.locale = 'zh'
            } else {
                this.$i18n.locale = 'en'
            }
            console.log('语言--->', this.$i18n)
        }
    },
};
</script>