Vue切换语言（vue-i18n插件）

1、安装插件

npm install vue-i18n

2、新建语言内容切换的配置文件

3、配置文件内容

（1）language-en.js

module.exports = {
  title: 'VueI8n usage example',
  userName: 'userName',
  pwd: 'password'
}

（2）language-zh.js

module.exports = {
  title: 'VueI8n使用',
  userName: '用户名',
  pwd: '密码'
}

4、在vue项目中的入口文件main.js引入

import VueI18n from 'vue-i18n'
import laguageZh from '../../vueI18n/language-zh'
import laguageEn from '../../vueI18n/language-en'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    zh: laguageZh,
    en: laguageEn
  }
})
new Vue({
  router,
  store,
  i18n, //挂在到vue根实例上
  render: h => h(index)
}).$mount('#app')

5、使用示例

<template>
  <div>
    <h2>{{$t(('title'))}}</h2>
    <l-form-model layout="inline">
      <l-form-model-item :label="$t(('userName'))">
        <l-input placeholder="请输入" />
      </l-form-model-item>
      <l-form-model-item :label="$t(('pwd'))">
        <l-input placeholder="请输入" />
      </l-form-model-item>
      <l-button type="primary" @click="changeLanguage">changeLanguage</l-button>
    </l-form-model>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lang: 'zh'
    }
  },
  methods: {
    changeLanguage() {
      const lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
    }
  }
}
</script>

6、效果