Schritt 1: Installieren Sie i18n
- Um Element kompatibel zu machen, ist hier Version 8 installiert
npm install vue-i18n@8
Schritt 2: Erstellen Sie eine neue i18n-Datei im src-Verzeichnis
Im Allgemeinen gibt es drei Dateien: index.js( 配置 )
, zh( 中文 )
, en( 英文 )
wenn es weitere Spracheinstellungen gibt, fügen Sie einfach die entsprechende js
Datei
Hinweis: Die interne Struktur aller Sprachpakete muss für einen einfachen Aufruf gleich sein
1. index.js-Datei
/*
* @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;
Die interne Struktur des Sprachpakets ist dieselbe, mit der Ausnahme, dass der entsprechende Inhalt die entsprechende übersetzte Sprache ist
Schritt 3: Führen Sie die i18n-Konfiguration in main.js ein
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)
})
Schritt 4: Auf der Seite verwenden
i18n
Nach der Einführung wird eine Variable global registriert $t
. Normalerweise nehmen wir den Wert von. {
{ name }}
Jetzt nehmen wir den Wert von {
{$t(choice)}}
, choice
der ein Attribut in der Sprache ist.
Klicken Sie auf die Schaltfläche auf der Anmeldeoberfläche, um zwischen Chinesisch und Englisch zu wechseln
<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>
Schritt 5: Internationalisierung der Formularregelüberprüfung ($t)
1. Schreiben Sie die Verifizierungsregeln in berechneter Form
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. Verbindliche Verifizierungsregeln
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
</el-form>
3. Rendern