72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
|
|
* All i18n resources specified in the plugin `include` option can be loaded
|
|
* at once using the import syntax
|
|
*/
|
|
import messages from '@intlify/unplugin-vue-i18n/messages';
|
|
|
|
import { router } from '@/plugins/00.router-plugin';
|
|
import { createGetRoutes } from 'virtual:meta-layouts';
|
|
import { createI18n } from 'vue-i18n';
|
|
import { START_LOCATION } from 'vue-router';
|
|
|
|
const locale = useLocalStorage<string>('app-locale', navigator.language);
|
|
watchEffect(() => {
|
|
window.document.documentElement.setAttribute('lang', locale.value);
|
|
});
|
|
|
|
// https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
|
|
export const i18nInstance = createI18n({
|
|
legacy: false, // you must set `false`, to use Composition API
|
|
locale: locale.value,
|
|
fallbackRoot: false,
|
|
// flatJson: true,
|
|
missing: (locale, key /* , instance, type */) => {
|
|
consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
|
|
return `[${key}]`;
|
|
},
|
|
missingWarn: !true,
|
|
fallbackWarn: !true,
|
|
messages,
|
|
});
|
|
|
|
export const routeI18nInstance = createI18n({
|
|
legacy: false, // you must set `false`, to use Composition API
|
|
locale: locale.value,
|
|
inheritLocale: true,
|
|
useScope: 'local',
|
|
missing: (locale, key) => {
|
|
consola.warn(`菜单翻译缺失: locale=${locale}, key=${key}`);
|
|
return key;
|
|
},
|
|
fallbackRoot: true,
|
|
messages: i18nRouteMessages,
|
|
});
|
|
|
|
watchEffect(
|
|
() => {
|
|
locale.value = i18nInstance.global.locale.value;
|
|
},
|
|
{ flush: 'sync' },
|
|
);
|
|
|
|
watch(
|
|
() => i18nInstance.global.locale.value,
|
|
() => {
|
|
const { t, te } = routeI18nInstance.global;
|
|
|
|
routeI18nInstance.global.locale.value = i18nInstance.global.locale.value;
|
|
|
|
if (router.currentRoute.value.name && router.currentRoute.value !== START_LOCATION) {
|
|
router.currentRoute.value.meta.title = t(router.currentRoute.value.name as string);
|
|
}
|
|
|
|
const routes = createGetRoutes(router)(); // 获取路由表但是不包含布局路由
|
|
|
|
routes.forEach((route) => {
|
|
const routeName = route.name as string;
|
|
route.meta.title = te(routeName) ? t(routeName) : routeName;
|
|
});
|
|
},
|
|
{ immediate: true, flush: 'sync' },
|
|
);
|