vue-cli中使用i18n国际化

首先安装vue-i18n
官网地址

http://kazupon.github.io/vue-i18n/

npm install vue-i18n

main.js中配置

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

切换语言组件

<template>
    <div class="changeLang">
        <div @click="showPopup">切换语言</div>
        <van-popup v-model="show" round position="bottom" get-container="#app" safe-area-inset-bottom>
            <van-picker
                    title="languages"
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="onCancel"
                    :default-index="2"
            />
        </van-popup>
    </div>
</template>

<script>
    import VueI18n from "vue-i18n";
    import {Locale} from "vant";
    import enUS from "vant/lib/locale/lang/en-US";
    import { mapState } from 'vuex'
    export default {
        name: "ChangeLang",
        data(){
            return{
                columns:['中文','En'],
                show: false,
            }
        },
        methods: {
            showPopup() {
                this.show = this.show === true ? false : true;
            },
            onConfirm(value, index) {
                if(value === '中文') {
                    this.$i18n.locale = 'zh';
                }else {
                    this.$i18n.locale = 'en';
                }

                this.show = false;
            },
            onCancel() {
                this.show = false;
            },
        }
    }
</script>

<style scoped lang="less">
    .changeLang {
        width: 140px;
        height: 40px;
        border-radius: 10px;
        background: #fff;
        position: absolute;
        z-index: 10;
        top: 10px;
        right: 10px;
    }
</style>

切换 语言后使用缓存保存当前选择，没有缓存默认使用en语言
使用语言包配置

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'en',
  messages:{
    'zh':require('./assets/lang/zh'),
    'en':require('./assets/lang/en')
  }
})

中文包

export const lang = {
        numList: [{
            num: '110000+',
            category: '入驻企业'
        }, {
            num: '40667',
            category: '助力成单量'
        }, {
            num: '1000000+',
            category: '客服人脉'
        }],
        log_list: ["一","二","三","四","五","六","七","八","九","十"],
}

英文包

export const lang = {
        numList: [{
            num: '110000+',
            category: 'Settled enterprise'
        }, {
            num: '40667',
            category: 'Help into order'
        }, {
            num: '1000000+',
            category: 'Customer service'
        }],
        log_list:['one','two','three','four','five','six','seven','eight','nine','ten']
}

页面使用

在组件的模板template中，调用 i18n.t() 方法获取语言

<div class="numContainer">
            <div class="numItem" v-for="num in $t('lang.numList')" :key="num.category">
                <div class="num">{{num.num}}</div>
                <div class="category">{{num.category}}</div>
            </div>
        </div>

mounted() {
            this.video = document.querySelector("video");
            // 监听视频播放
            this.$refs.media.addEventListener('play', this.handlePlay);
            this.$refs.media.addEventListener('pause', this.handlePause);
            console.log(this.$i18n.t('lang.log_list'))
        },