i18n国际化-v2.0

点击查看代码

//安装：
yarn add vue-i18n@6.x

main.js
import i18n from '@/lang'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

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

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: jsCookie.get('lang') || 'zh',
  messages: {
    // 语言包
    en: {
      F: 'file',
      xxx: 'home',
      ...enLocale
    },
    zh: {
      F: '文件',
      xxx: '首页',
      ...zhLocale
    }
  }
})

export default i18n



src/components/navbar.vue
<!-- 国际化： -->
    <el-dropdown @command="commandLang">
      <span>
        <svg-icon icon-class="language" style="margin-right: 20px color:#fff" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="$i18n.locale === 'zh'">
            中文
          </el-dropdown-item>
          <el-dropdown-item command="en" :disabled="$i18n.locale === 'en'">
            EN
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

 // 语言切换：
    commandLang(command) {
      this.$i18n.locale = command
      // 持久化
      jsCookie.set('lang', command)
      // 刷新
      this.$router.go(0)
    },

/src/router.js
import i18n from '@/lang/index'
meta:{title: i18n.t('xxx'),icon:'dashboard'}