vue怎么实现国际化? vue-i18n 插件实现国际化，支持切换不同语言

依赖的文档开始 | Vue I18n

一、安装 

npm install vue-i18n

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

二、使用

在 src 下创建 lang 文件夹

1.准备语言包

这里我们用中文和英文的来举例，在lang文件下创建en.js和zh,js

// en.js
export default {
  login: {
    username: 'Username',
    password: 'Password'
  },
}

// zh.js
export default {
  login: {
    username: '用户名',
    password: '密码'
  },
}

2、准备翻译的语言环境

在 lang 下创建 index.js，使用如上的两种语言包。

// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // 设置语言 选项 en | zh
  locale: Cookies.get('language') || 'zh',
  // 设置文本内容
  messages
})

export default i18n

3、实现语言翻译

import i18n from './lang'
// use使用添加i18n
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,//注入
  render: h => h(App)
})

如何使用

实现语言切换

  

 computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang;   //设置当前语言
      // this.$store.dispatch('app/setLanguage', lang);
      this.$message({
        message: '设置语言成功',
        type: 'success'
      })
    },
  }

到这里就可以实现语言切换了