学习笔记四：Vue3.x+Element Plus项目Demo引入Vue-i18n并实现手动切换页面语言
前言
学习 Vite 和 Vue3 并搭建项目 Demo，主要目的是搭项目，对于新手直接跟着操作就可以把项目搭起来，借这个机会自己尝试写写博客，希望对大家有帮助。
- 项目码云（Gitee）仓库地址
- 个人主页
参考链接
- 中文官网：Vue I18n v8.x
- 英文官网：Vue I18n v9.x
- vue3.0 配置 vue-i18n - 易函 123 - 博客园
- vue3 国际化如何使用 vue-i18n 以及解决切换语言不刷新的问题 - baifangzi - 博客园
（一）安装 vue-i18n
# npm
npm install vue-i18n@9
# yarn
yarn add vue-i18n@9
// package.json
{
"name": "vite-vue",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.3.2",
"element-plus": "^2.2.16",
"vue": "^3.2.37",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"unplugin-auto-import": "^0.11.5",
"unplugin-vue-components": "^0.22.12",
"vite": "^3.1.0"
}
}
（二）准备语言文件
- 根据项目需求，需要几种语言就准备多少份语言文件，常规使用
中/英。 - 不同语言文件中，同一个区域显示的文本对应的
JSON字段名要保持一致，应用时通过该字段名定位对应的翻译。
1.中文
// src/lang/zh_CN.js
const zh_CN = {
title: {
login: "登录",
},
button: {
login: "登录",
logout: "退出登录",
isLogged: "已登录",
submit: "提交",
reset: "重置",
},
label: {
email: "邮箱",
password: "密码",
},
};
export default zh_CN;
2.英文
// src/lang/en_US.js
const en_US = {
title: {
login: "Login",
},
button: {
login: "Login",
logout: "Logout",
isLogged: "Logged",
submit: "Submit",
reset: "Reset",
},
label: {
email: "Email",
password: "Password",
},
};
export default en_US;
（三）全局配置文件
- 使用
createI18n钩子创建全局对象，更多配置请查看官网。
// src/lang/index.js
import { createI18n } from "vue-i18n";
// 自定义语言文件
import zh_CN from "./zh_CN";
import en_US from "./en_US";
const i18n = createI18n({
legacy: false, // 使用 Composition API 模式
locale: "zh_CN", // 语言库
messages: {
zh_CN,
en_US,
},
});
// 将i18n暴露出去，在main.js中引入挂载
export default i18n;
- 入口文件中引入。
// src/main.js
// 引入Vue-i18n
import i18n from "./lang";
app.use(i18n);
（四）使用方式
1.App.vue 增加开关组件
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
a>
div>
<el-switch
v-model="langSwitch"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
margin: 10px auto 20px;
display: block;
"
inline-prompt
active-text="中"
inactive-text="英"
/>
<router-view>router-view>
template>
import { ref } from "vue";
// 中英文切换开关
const langSwitch = ref(true);
2.template 中使用 t 函数
- 参见官网
- 模板中使用
{{ t("") }}匹配语言文件中的字段名。 setup中使用useI18n()钩子函数导入t函数。
<template>
<div style="padding: 50px 0 0">
<h1 style="font-size: 50px; font-weight: bolder">{{ t("title.login") }}h1>
div>
<el-form
ref="loginFormRef"
:model="loginForm"
status-icon
:rules="loginFormRules"
label-width="120px"
>
<el-form-item :label="t('label.email')" prop="email">
<el-input v-model="loginForm.email">el-input>
el-form-item>
<el-form-item :label="t('label.password')" prop="pass">
<el-input v-model="loginForm.pass" type="password" autocomplete="off" />
el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(loginFormRef)">
{{ t("button.submit") }}
el-button>
<el-button @click="resetForm(loginFormRef)">
{{ t("button.reset") }}
el-button>
el-form-item>
el-form>
template>
// 导入t函数
import { useI18n } from "vue-i18n";
const { t } = useI18n();
3.setup 中配合组件切换语言显示
- 参见官网
useI18n()提供locale属性，用于切换语言。switch开关组件绑定事件实时切换语言。
<el-switch
v-model="langSwitch"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
margin: 10px auto 20px;
display: block;
"
inline-prompt
active-text="中"
inactive-text="英"
@change="handleChangeI18n"
/>
// i18n
import { useI18n } from "vue-i18n";
const { locale } = useI18n({ useScope: "global" });
// 中英文切换开关
const langSwitch = ref(locale.value === "zh_CN");
// 中英文切换事件
const handleChangeI18n = (val) => {
console.log(val);
// true为中文，false为英文
locale.value = val ? "zh_CN" : "en_US";
};
4.本地缓存当前语言
使用 localStorage 记录当前语言环境，用户刷新页面时再根据 localStorage 是否有值绑定语言环境。
locale.value = localStorage.getItem("locale") || "zh_CN"; // 页面首次加载显示的语言
// 中英文切换事件
const handleChangeI18n = (val) => {
console.log(val);
// true为中文，false为英文
locale.value = val ? "zh_CN" : "en_US";
localStorage.setItem("locale", locale.value); // 本地缓存当前页面语言
};
你以为的不是你以为的
到这里就可以实现按钮切换页面语言了，但其实还没结束…
引入 Element Plus 的取色器组件（随便一个组件都可以），会发现切换按钮时，只有通过以上两种方式绑定渲染的文本会随之变化（ {{t("")}} 或者 locale.value ），组件内部文本是不会切换语言的 。
所以需要配置 Element Plus 组件国际化。
（五）配置 Element Plus 组件国际化
官方文档：国际化 | Element Plus
1.修改入口文件
引入 Element Plus 时，配置第二个参数，使当前页面语言环境与 localStorage 存储的值一致。
// src/main.js
// Element Plus全局配置国际化
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
app.use(ElementPlus, {
// locale: zhCn,
locale: localStorage.getItem("locale") === "zh_CN" ? zhCn : en,
});
2.使用 ConfigProvider
Element Plus 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
<template>
<el-config-provider :locale="elLocale">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
a>
div>
<el-switch
v-model="langSwitch"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
margin: 10px auto 20px;
display: block;
"
inline-prompt
active-text="中"
inactive-text="英"
@change="handleChangeI18n"
/>
<el-color-picker v-model="colorPicker" />
<router-view>router-view>
el-config-provider>
template>
3.使用 Computed 属性切换语言
官方文档：全局配置 | Element Plus
// Element Plus组件国际化
const elLocale = computed(() => (locale.value === "zh_CN" ? zhCn : en));
