Vue+Element の国際化 (i18n)

ステップ 1: i18n をインストールする

• ここではElementに互換性を持たせるため、バージョン8をインストールしています。

npm install vue-i18n@8

ステップ 2: src ディレクトリに新しい i18n ファイルを作成する

index.js( 配置 )一般に、 、の 3 つのファイルがあります。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;

言語パックの内部構造は、対応するコンテンツが対応する翻訳言語であることを除いて同じです。

ステップ 3: 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)
})

ステップ 4: ページ上で使用する

導入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>

ステップ 5: フォーム フォーム ルール検証の国際化 ($t)

1. 検証ルールを計算結果に書き込む

  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>

3. レンダリング