国际化

Next Element Vue 组件 默认使用中文，如果你希望使用其他语言，你可以参考Element Plus的方案。完全兼容Element Plus 的配置方案。当设置Element Plus国际化配置时，Next Element Vue 组件自动跟随

// i18n/index.ts
import { createI18n } from 'vue-i18n';
import { createPinia, storeToRefs } from 'pinia';
import { ThemeConfigStore } from '@/stores/themeConfig';
// element-plus组件默认配置
import zhcnLocale from 'element-plus/dist/locale/zh-cn';
import enLocale from 'element-plus/dist/locale/en';
import zhtwLocale from 'element-plus/dist/locale/zh-tw';
// nextZhcn,nextEn,nextZhtw为自定义语言配置

const pinia = createPinia();
const messages = {
	[zhcnLocale.name]: {
		...zhcnLocale,
		message: {
			...nextZhcn,
		},
	},
	[enLocale.name]: {
		...enLocale,
		message: {
			...nextEn,
		},
	},
	[zhtwLocale.name]: {
		...zhtwLocale,
		message: {
			...nextZhtw,
		},
	},
};

// 读取 pinia 默认语言
const stores = ThemeConfigStore(pinia);
const { themeConfig } = storeToRefs(stores);
export const i18n = createI18n({
	legacy: false,
	silentTranslationWarn: true,
	missingWarn: false,
	silentFallbackWarn: true,
	fallbackWarn: false,
	locale: themeConfig.value.globalI18n,
	fallbackLocale: zhcnLocale.name,
	messages,
});

// main.ts
import { i18n } from '@/i18n/index';

app.use(i18n)

• 语言切换，可以参考NextLayout组件的使用

import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const onChangeLanguage = (langue: string) => {
	locale.value = langue;
};