vue3中 i18n 使用方法

Holle! 我是Boy~，今天我给大家分享以下关于vue3中 i18n 使用方法

1.安装 vue-i18n

npm install vue-i18n
yarn add vue-i18n

2.在根目录下创建 locales 文件夹，并在 locales 文件夹下创建 en.js、zh.js、i18n.js

3.在en.js、zh.js中创建一个对象并导出

• en.js 文件

const en = { use: { username: "liudong", }, }
export default en;

• zh.js 文件

const zh = { use: { username: "刘东", }, }
export default zh;

4. i18n.js 定义配置项

import { createI18n } from "vue-i18n";     // 引入vue-i18n组件
import zh from "./zh";     // 引入zh.js 模块
import en from "./en";     // 引入en.js 模块

//注册i18n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: "zh", // 语言标识（缓存里面没有就用中文）
    fallbackLocale: "en", //没有英文的时候默认中文语言
    messages: {
         zh,
         en,
    },
});
export default i18n;

5. 在 mian.js 中导入 i18n.js 模块并挂载

import { createApp } from "vue";
import App from "./App.vue";
import i18n from "./locales/i18n";
const app = createApp(App);
app.use(i18n);
app.mount("#app");

6. 点击切换中英文

<template>
	<el-dropdown @command="handleCommand"> 
		‹span class-"el-dropdown-link">
			<el-icon style-"font-size: 20px"><Grid /></el-icon>
		<span> 
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item command-"zh" v-if-"!store.state.menu. language"›简倅中文‹el-dropdown-item>
				<el-dropdown-item command-"en" v-else›English</el-dropdown-item>
				<el-dropdown-item command-"i18n"›i18n</el-dropdown-item>
			‹/el-dropdown-menu>
	</el-dropdown>
</ template>
<script>
import { useStore } from "vuex" import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const i18n = usel18n();
const handleCommand = (command) = {
	if (command = "zh" I| command = "en") {
		if (store.state.menu.language = true) {
			i18n. locale.value = command;
			store.state.menu.setoffs = i18n. locale.value;
		} else {
			118n.locale.value = command;
			store.state.menu.setoffs = i18n.locale.value;
		}	
		store.commit("setoff");
		console.log(i18n. locale.value);
	} else {
		router.push("/i18n");
	}
};
</script>

7. 在template模板下使用 $t(“use.username”)

<el-dropdown-item :command-"$t('menu.user.exityesa')" ›{{$t('menu.user.exit')}}</el-dropdown-item>

持久化处理

• i18n.js

// 默认读取本地存储语言设置
const defaultLocale = localStorage.getItem("locale") || "zh";
//注册i18n实例并引入语言文件
const i18n = createI18n({
	legacy: false,
	locale : defauitLocale，// 语言标识（缓存里面设有就用中文）
	fallbackLocale:"en"，//没有英文的时候默认中文语言
	allowcomposition : true, // 允许組合式api
	messages: {
		zh, en,
	},
});
export default i18n;

• .vue

const handleCommand = (command) = {
		if (command = "zh" || command = "en") {
			if (store.state.menu.language === true) {
				i18n.locale.value = command;
				localStorage.setItem( "locale", command);//修改本地存储
				store.state.menu.setoffs = i18n.locale.value;
			} else {
				i18n.locale.value = command;
				localStorage. setItem( "locale”, command)；//修改本地存储
				store.state.menu.setoffs = i18n.locale.value;
			}
		}