vue+vant国际化i18n用法

1.安装i18n npm install vue-i18n -S

2.在src目录下创建一个lang文件夹，内建三个文件：index.js en_us.js zh_cn.js

en_us.js代码如下：

export default {
    app: {
        hello: 'Hello,World'
    }
}

zh_cn.js代码如下：

export default {
    app: {
        hello: '你好，世界！'
    }
}

index.js代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {Locale} from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enLocale from './en_us'
import zhLocale from './zh_cn'

Vue.use(VueI18n)

const messages = {
    en: {
      ...enUS,
      ...enLocale
    },
    zh: {
      ...zhCN,
      ...zhLocale
    }
  }
  
  const i18n = new VueI18n({
    locale: 'zh',  // 设置默认语言
    messages: messages // 设置资源文件对象
  })
  
  // 更新vant组件库本身的语言变化，支持国际化
  function vantLocales (lang) {
    if (lang === 'en') {
      Locale.use(lang, enUS)
    } else if (lang === 'zh') {
      Locale.use(lang, zhCN)
    }
  }
  
  export {i18n, vantLocales}

3.修改src/main.js文件内容：

import {i18n, vantLocales} from './lang'

vantLocales(i18n.locale)

new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
  }).$mount('#app');

4.使用：

<template>
  <div>语言设置
    <van-nav-bar :title="this.$t('app.hello')" @click-left="show=true">
      <van-icon name="search" slot="left" />
    </van-nav-bar>
    <button @click="changeLang">切换语言</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods:{
    changeLang(){
      this.$i18n.locale == 'en'? this.$i18n.locale = 'zh':this.$i18n.locale = 'en'
    }
  }
};
</script>

5.用你的左手的手心，大力的和右手的手心接触。