第一步:安装 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>
3. 效果图