先附上插件官網 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>