第一步：安装 i18n

这里为了让 Element 兼容，安装的是 8 版本的

npm install vue-i18n@8

第二步：在 src 目录下新建一个i18n文件

一般有三个文件：index.js( 配置 )、zh( 中文 )、en( 英文 )
如果有个更多的语言设置，新增对应的 js 文件即可
注意：所有语言包的内部结构必须一样，方便调用

1.index.js 文件

/*
 * @Author: pcf pcf
 * @Date: 2022-07-19 10:29:46
 * @LastEditors: pcf pcf
 * @LastEditTime: 2022-08-03 16:09:34
 * @FilePath: \itanri2-admin-front\src\assets\i18n\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Vue from "vue"; //引入vue
import VueI18n from 'vue-i18n';
import elementEnLocale from 'element-ui/lib/locale/lang/en' //element英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'//中文包
import enLocale from "./en";
import zhLocale from "./zh";

Vue.use(VueI18n) // 通过插件的形式挂载

// 引入本地
const messages = {
    en: {
     message: 'hello',
     ...enLocale,
     ...elementEnLocale
    },
    zh: {
    message: '你好',
    ...zhLocale,
    ...elementZhLocale
    }
}

// 创建国际化实例
const i18n = new VueI18n({
    // 设置默认语言
    locale:sessionStorage.getItem('locale') || 'zh',
    messages,
})
export default i18n

2.zh.js

const zh = {
    lang: 'zh_CN',
    choice: '选 择',
    choice_one: '选中',
    submit: '提 交',
    message: '信息',
}
export default zh;

3.en.js

const en = {
    lang: 'en_US',
    choice: 'choice',
    choice_one: 'pitch',
    submit: 'submit',
    message: 'message',
}
export default en;

语言包的内部构造一样，只不过是对应的内容分别为对应的翻译过来的语言

第三步：main.js 里引入 i18n 的配置

import i18n from './assets/i18n';
import Element from 'element-ui'
// 如果使用了 Element UI
Vue.use(Element, {
    size: 'medium', // set element-ui default size
    i18n: (key, value) => i18n.t(key, value)
})

// 最最最重要一步，必须把 i8n 放在 vue 实例里

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

第四步：在页面使用

引入 i18n 以后，会全局注册一个变量 $t
平时我们取值都是 { { name }}
现在我们取值是 { {$t(choice)}}，choice 就是在语言里的属性,

登录界面按钮点击切换中英文

<template>
  <div class="login">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <h3 class="title">{
   
   { $t("management") }}</h3>    

      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">{
   
   { $t("register") }}</span>
          <span v-else>{
   
   { $t("register_in") }}</span>
        </el-button>
        <div>
          <el-button
            style="margin-left: 41%"
            @click="changeType('zh')"
            type="text"
            >中文</el-button
          >
          <span>|</span>
          <el-button @click="changeType('en')" type="text">English</el-button>
        </div>

        <div style="float: right" v-if="register">
          <router-link class="link-type" :to="'/register'"
            >立即注册</router-link
          >
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
 data(){
     return {}
},
  methods: {
    // 中英文
    changeType(type) {
      this.$nextTick(() => {
        sessionStorage.setItem("locale", type);
        this.$i18n.locale = type;
        localStorage.setItem("lang", this.$t("lang"));
      });
    }
  },

};
</script>

第五步：form表单规则验证国际化($t)

1. 将校验规则写在 computed 里面

  computed: {
    loginRules() {
      return {
        username: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("enterNumber"),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("enterPassword"),
          },
        ],
        code: [
          {
            required: true,
            trigger: "change",
            message: this.$t("enterVerificationCode"),
          },
        ],
      };
    },
  },

2. 绑定校验规则

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> 
    </el-form>

Vue+Element 国际化(i18n)