在写一些全球化的项目时,不可避免的就是翻译问题,我们可以使用 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,后续会持续更新相关博客,期待你的点赞和关注。