vue 多语言设置

1、安装 vue-i18n 依赖包

cnpm install vue-i18n --save

2、在assets目录下创建语言包

英文包 en.js

module.exports = {
  login: 'Login',
  Username: 'Username',
  Password: 'Password',
  Captcha: 'Captcha',
  Language: 'Language',
  zh: 'Chinese',
  en: 'English'
}

中文包 zh.js

module.exports = {
  login: '登录',
  Username: '用户名',
  Password: '密码',
  Captcha: '验证码',
  Language: '语言',
  zh: '中文',
  en: '英文'
}

3、在main.js中引入 vue-i18n

方式一：基本使用

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
 locale: 'zh',    // 语言标识
 messages : {
   en: {
     message: {
       login: 'Login',
     }
   },
   zh: {
     message: {
       login: '登录',
     }
   }
 }
})

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

方式二：使用语言包

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',    // 语言标识. 通过切换locale的值来实现语言切换
  messages: {
    'zh': require('@/assets/lang/zh'),   // 中文语言包
    'en': require('@/assets/lang/en')    // 英文语言包
  }
})

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

4、使用

<template>
  <div>
    {{$t('Language')}}：
    <el-select v-model="language" placeholder="请选择" size="mini">
      <el-option v-for="item in lang" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div>{{$t('login')}}</div>
    <div>{{$t('Username')}}</div>
    <el-button @click="$router.push('/next')" size='mini'>{{$t('next')}}</el-button>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1   //数据加载时判断当前属于哪种语言，为其单选按钮赋值
  },
  data () {
    return {
      language: 0,
      lang: [
        { label: this.$t('zh'), value: 0 },
        { label: this.$t('en'), value: 1 }
      ],
    }
  },
  watch: {
    language (val) {
      val === 0 ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
      this.$set(this.lang, 0, { label: this.$t('zh'), value: 0 });
      this.$set(this.lang, 1, { label: this.$t('en'), value: 1 })
    }
  },
  methods: {
    next () {
      this.$router.push('/next');
    }
  }
}
</script>

//next.vue
<template>
  <div class=''>
    <div>{{$t('Password')}}</div>
    <div>{{$t('Captcha')}}</div>
  </div>
</template>

5、效果