Vue I18n Vue.js 的国际化插件+elementUI的使用

先附上插件官网 vue-i18n中文官网

我们的vue项目需要支持多语言时，可以使用这个插件

安装插件教程在官网可以找到

代码结构可以如下

 

zh.js

查看代码

export default {
  login: {
    Login: "登陆",
  },
};

 

index.js 的代码如下

这一部分在element官网可以找到相关文档

 https://element.eleme.cn/#/zh-CN/component/i18n

查看代码

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import elementEnLocale from "element-ui/lib/locale/lang/en"; // 引入elementui的国际化参数
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN";
import customEnLocale from "./en"
import customZhLocale from "./zh-CN"
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)

const messages = {
  en: {
    ...elementEnLocale,
    ...customEnLocale
  },
  zh: {
    ...elementZhLocale,
    ...customZhLocale
  }
}

const i18n = new VueI18n({
  locale: 'zh',
  messages,
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

在main.js中引入

查看代码

...

import i18n from './lang'

...

Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) });// elementui的国际化，
...

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

 

切换语言代码

header组件中切换

查看代码

<div class="lang-wrapper">
        <el-dropdown @command="changeLang">
          <span class="el-dropdown-link">
            {{$i18n.locale}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

changeLang(command) {
    this.$i18n.locale = command
},

template 中的代码

<el-button type="primary" @click="login">{{$t("login.Login")}}</el-button>