前端项目经验 —— i18n 国际化插件

在写一些全球化的项目时，不可避免的就是翻译问题，我们可以使用 i18n 来解决，下面还是使用 vue3 来做演示。

---

安装插件

npm install vue-i18n

---

配置 index 文件

一般的，我们会将有关语言的文件放在 lang 文件夹下；接着，我们引入下载好的插件来进行配置。

// index.js

import { createI18n } from "vue-i18n"; // 引入插件

import zn from "./zn"; // 简体中文

import en from "./en"; // 英语

export let i18n = createI18n({
  locale: "zn", // 默认语言
  legacy: false, // 在 composition API 中生效
  globalInjection: true, //全局生效 $t
  // 对应语言的对象，有时候我们一个语言对应的文件很大，所以我们使用导入的方法来写，提高阅读性
  messages: {
    zn,
    en,
  },
});

// zn.js

export default {
  home: "首页",
};

// en.js

export default {
  home: "home",
};

接着，在 main.js 中引入

// main.js

import { createApp } from "vue";
import App from "./App.vue";

import { i18n } from "./lang/index";

const app = createApp(App);

app.use(i18n);
app.mount("#app");

---

 

全局模板使用

然后我们在模板中使用 $t() 来全局使用即可，不需要多余的操作

<script setup></script>

<template>
  <div>{{ $t("home") }}</div>
</template>

<style lang="scss" scoped></style>

效果如下，因为默认语言是中文，所以显示的即中文；

---

script 中引入使用

刚才我们在 html 中直接使用，但有时候我们需要在 script 标签中使用，所以我们先在 script 中写一些变量在下文中操作：

<script setup>
import { useI18n } from "vue-i18n"; // 引入插件中的方法
const { t } = useI18n(); // 解构 t 方法

let str = t("home"); // 如同在全局中使用 $t() 一样，只是我们需要在此处引入 t 方法
</script>

<template>
  <div>{{ $t("home") }}</div>
  <div>{{ str }}</div>
</template>

<style lang="scss" scoped></style>

在页面上的效果如下：

---

语言切换

接着，我们添加一个按钮来做语言切换，即切换配置文件中的 locale 字段为对应的语言，代码如下：

<script setup>
import { reactive } from "vue";
import { useI18n } from "vue-i18n"; // 引入插件中的方法
const { t, locale } = useI18n(); // 解构 t 方法

let langList = reactive(["zn", "en"]); // 用于渲染在页面和语言切换
let str = t("home");

const changeLangFun = (item) => {
  locale.value = item;
};
</script>

<template>
  <div class="btnList">
    <button
      v-for="(item, i) in langList"
      @click="changeLangFun(item)"
      class="btn"
      :key="i"
    >
      {{ item }}
    </button>
  </div>

  <div>{{ $t("home") }}</div>
  <div>{{ str }}</div>
</template>

在切换时我们会发现，只有 $t() 中的文本进行了语言切换，所以我们要修改一下代码，将 str 变量使用 ref() 定义，然后在方法 changeLangFun  中更新 str 变量，代码如下：

<script setup>
import { reactive, ref } from "vue";
import { useI18n } from "vue-i18n"; // 引入插件中的方法
const { t, locale } = useI18n(); // 解构 t 方法

let langList = reactive(["zn", "en"]); // 用于渲染在页面和语言切换
let str = ref(t("home"));

const changeLangFun = (item) => {
  locale.value = item;
  str = t("home");
};
</script>

至此，我们就掌握了 i18n 插件的用法，如果有疑惑可以在下方留言，希望能够帮助到你。

---

这里是Matcha，坚持每天都输出文章&博客&观点，对本文章若有疑惑可以在评论区留言或者私聊我，我每天都会追踪最新消息和即使回复；目前我正在学习 three.js，后续会持续更新相关博客，期待你的点赞和关注。