61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { preferencesManager } from '@vben-core/preferences';
|
||
|
||
import { overridesPreferences } from './preferences';
|
||
|
||
/**
|
||
* 应用初始化完成之后再进行页面加载渲染
|
||
*/
|
||
async function initApplication() {
|
||
// name用于指定项目唯一标识
|
||
// 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
|
||
const env = import.meta.env.PROD ? 'prod' : 'dev';
|
||
const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`;
|
||
|
||
// app偏好设置初始化
|
||
await preferencesManager.initPreferences({
|
||
namespace,
|
||
overrides: overridesPreferences,
|
||
});
|
||
|
||
// 启动应用并挂载
|
||
// vue应用主要逻辑及视图
|
||
const { bootstrap } = await import('./bootstrap');
|
||
await bootstrap(namespace);
|
||
|
||
// 移除并销毁loading
|
||
destroyAppLoading();
|
||
}
|
||
|
||
/**
|
||
* 移除并销毁loading
|
||
* 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
|
||
* 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
|
||
* 不好的地方是会增加一些代码量
|
||
*/
|
||
function destroyAppLoading() {
|
||
// 查找全局 loading 元素
|
||
const loadingElement = document.querySelector('#__app-loading__');
|
||
|
||
if (loadingElement) {
|
||
// 添加隐藏类，触发过渡动画
|
||
loadingElement.classList.add('hidden');
|
||
|
||
// 查找所有需要移除的注入 loading 元素
|
||
const injectLoadingElements = document.querySelectorAll(
|
||
'[data-app-loading^="inject"]',
|
||
);
|
||
|
||
// 当过渡动画结束时，移除 loading 元素和所有注入的 loading 元素
|
||
loadingElement.addEventListener(
|
||
'transitionend',
|
||
() => {
|
||
loadingElement.remove(); // 移除 loading 元素
|
||
injectLoadingElements.forEach((el) => el.remove()); // 移除所有注入的 loading 元素
|
||
},
|
||
{ once: true },
|
||
); // 确保事件只触发一次
|
||
}
|
||
}
|
||
|
||
initApplication();
|