vue+element使用vue-i18n实现国际化，包括element中组件的国际化

最新推荐文章于 2026-03-30 09:26:19 发布

原创最新推荐文章于 2026-03-30 09:26:19 发布 · 1.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #npm #前端 #chrome #vue.js

这篇博客介绍了如何在Vue项目中结合Element UI使用vue-i18n进行国际化设置。首先通过npm安装vue-i18n，然后创建中英文语言文件cn.js和en.js，并在index.js中整合。接着配置i18n.js，并在main.js中引入和挂载。最后，在页面中可以调用这些国际化设置。

安装vue-i18n
npm install vue-i18n
在main.js同级目录建立如下i18n文件夹，此处只演示中英文，如需其他语言同理新增相应语言js文件夹和element的语言包并配置好即可。
在这里插入图片描述
cn.js中文件内容：

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //element组件中文语言包
const cn = {
    index:{
        'title':'中文',
    },
    ...zhLocale
}
export default cn

en.js中文件内容：

//en.js
import enLocale from 'element-ui/lib/locale/lang/en' //element组件英语语言包
const en = {
    index:{
        'title':'Chinese',
    },
    ...enLocale
}
export default en

index.js中文件内容：

//langs/index.js
import en from './en'
import cn from './cn'
export default {
  en,
  cn
}

i18n.js中文件内容：

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
 
export default i18n

在main.js中引入并挂载i18n

import i18n from './i18n/i18n'
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

在页面中使用

<template>
  <div class="container">
    <el-dropdown trigger="click" @command="switchLang">
      <p> 切换语言 <i class="el-icon-arrow-down el-icon--right"></i></p>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item of langOptions" :key="item.value" :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <p> {{ $t('index.title') }} </p>
  </div>
</template>
export default {
  name: 'Login',
  computed:{//定义在data里面的数据切换语言内容不变，写到computed里来},
  data() {
    return {
      lang: "en",
      langOptions: [
        { label: "中文", value: "cn" },
        { label: "English", value: "en" },
      ]
    }
  },
  methods: {
   switchLang(lang) {
      window.localStorage.lang = lang;
      this.$i18n.locale = lang;
    }
  }
}
</script>