vue项目国际化

1安装i18n

npm install vue-i18n

2配置main.js
如下图：

3在根目录下床架lang文件夹和语言文件：

en.js:

export default {
  login: {
    title: 'Back Login Form',
    logIn: 'Login in',
    username: 'Username',
    password: 'Password',
    rememberPassword: 'Remember Password',
    logining: 'Logining'
  }
  }

zh.js:

export default {
  login: {
    title: '后台管理系统',
    logIn: '登录',
    username: '账号',
    password: '密码',
    rememberPassword: '记住密码',
    logining: '登录中'
  }
  }

tw.js:

export default {
  login: {
    title: '後台管理系統',
    logIn: '登錄',
    username: '賬號',
    password: '密碼',
    rememberPassword: '記住密碼',
    logining: '登錄中'
  }
  }

index.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import locale from 'element-ui/lib/locale'
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 elementTWLocale from 'element-ui/lib/locale/lang/zh-TW'
import enLocale from './en'
import zhLocale from './zh'
import twLocale from './tw'
Vue.use(VueI18n)

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

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

export default i18n

语言选择插件：index.vue

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <svg-icon class-name="international-icon" icon-class="language" style="width: 25px;height: 25px;" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command="zh">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command="en">
        English
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='tw'" command="tw">
        繁體
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  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'
      })
    }
  }
}
</script>

页面使用示例：

先引入语言选项下拉框，选择语言查看效果