学习笔记四：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="英"
  />

  <!-- <Login /> -->
  <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 用于全局配置国际化的设置。

<!-- src/App.vue -->
<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" />

    <!-- <Login /> -->
    <router-view></router-view>
  </el-config-provider>
</template>

3.使用 Computed 属性切换语言

官方文档：全局配置 | Element Plus

// Element Plus组件国际化
const elLocale = computed(() => (locale.value === "zh_CN" ? zhCn : en));