前端国际化学习

前端国际化是很多地方都能用到的,今天学习一下用 vue3 + vite + ts + vue-i18n 插件来开发前端国际化项目

安装插件 vue-i18n
```
npm install vue-i18n
```

创建翻译文件
-在 src 目录下新增 lang 目录,存放多语言文件
-这里简单创建了两个文件,用于中英文翻译后续可以继续添加多语言文件

// en.ts
export default {
 multilingual: {
  title: 'This is multilingual page!',
  input: "Please enter the content",
  button: "switch the language",
 }
}
// zh.ts
export default {
 multilingual: {
  title: '这是多语言页面',
  input: "请输入内容",
  button: "切换语言",
 }
}

在vue中引入使用 vue-i18n

// main.ts
// 引入多语言模块
import { createI18n } from "vue-i18n";
// 引入cookie (使用了js-cookie用于便捷操作cookie)
import Cookies from "js-cookie";
// 引入多语言文件
import enLocale from "./lang/en";
import zhLocale from "./lang/zh";

const messages = {
 en: {
  ...enLocale,
 },
 zh: {
  ...zhLocale,
 },
};

// 创建多语言实例
const i18n = createI18n({
  legacy: false, // 使用3.x版本
  locale: Cookies.get("language") || "en", // 默认语言
  messages:messages, // 多语言配置
});

// 链式调用方法 createApp(App).use(i18n)
app.use(i18n);

使用多语言在页面内替换原本文字

<template>
  <div class="multilingual">
	<h1>{{ $t("multilingual.title") }}</h1> <!-- 普通文本使用方式 {{ $t('multilingual.title') }} -->
	<input
	  type="text"
	  :placeholder="$t('multilingual.input')" 
	/><!-- 标签内使用方式 :placeholder="$t('multilingual.password')" -->
	<button @click="changeLanguage">{{ $t("multilingual.button") }}</button>
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
console.log(t("multilingual.title")); // js内使用方式 t("multilingual.title")

/**
 * 切换语言
 */
const changeLanguage = () => {
  Cookies.set(
	"language",
	Cookies.get("language") === "zh" ? "en" : "zh",
  );
  window.location.reload(); // 刷新页面
};
</script>