vue通过i18n 实现国际化

装包

npm i vue-i18n

在main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import i18n from './lang/index'

Vue.config.productionTip = false

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

在src目录下创建language文件夹

并建立english.js，index.js,chinese.js文件，并分别写入

export default {
  title: 'Blockchain visual display',
  loginTitle: 'User login',
  account: 'Account',
  password: 'Password',
  one: {
    two: 'two class'
  }
}

import Vue from 'vue' // 引入vue
import VueI18n from 'vue-i18n' // 引入i18n模块
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui中文包
import locale from 'element-ui/lib/locale' // 引入element-ui语言包模块
import enLocale from './en' // 本地英文包
import zhLocale from './zh' // 本地中文包

Vue.use(VueI18n) // vue使用i18n模块
// 引入本地
const messages = {
  en: {
    ...enLocale, // es6的拓展运算符，相当于解析出每个对象
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 创建国际化实例
const i18n = new VueI18n({
  locale: window.localStorage.getItem('language') || 'en', // set locale，默认使用英文
  messages // set locale messages
})
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

export default {
  title: '区块链可视化展示',
  loginTitle: '用户登录',
  account: '账号',
  password: '密码',
  one: {
    two: '二级'
  }
}

最后在app.vue操作，实现国际化

<template>
  <div>
<el-dropdown class="languageSetting" trigger="click" @command="handleSetLanguage">
  <span class="international-icon">
    {{ language }}<i class="el-icon-caret-bottom" />
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="zh" :disabled="language === '中文'">中文</el-dropdown-item>
    <el-dropdown-item command="en" :disabled="language === 'English'">English</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<el-button>{{ $t('one.two') }}</el-button> 
<el-input type="password"  :placeholder="$t('password')"></el-input>
<span> {{ $t('account')}}</span>
<span> {{ $t('loginTitle')}}</span>

  </div>
</template>

<script>
export default {
computed: {
    language() {
      if (this.$i18n.locale === 'zh') {
        return '中文'
      }
      if (this.$i18n.locale === 'en') {
        return 'English'
      }
      return ''
    }
},
methods: {
    handleSetLanguage(language) {
      // 选择语言
      this.$i18n.locale = language
      window.localStorage.setItem('language', language)
    },
}


}
</script>

<style>

</style>