;(async () => { /*! 项目应用根路径 */ // @ts-ignore window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/' /*! 模块加载请求处理 */ const options = { // 模块缓存 // @ts-ignore moduleCache: { vue: Vue, less: less }, // 动态加载文件 getFile(url) { if (!/^(https?:)?\/\//) { // @ts-ignore url = (appRoot + url).replace(/\/+.?\/+/g, '/') } return fetch(url).then((res) => { if (res.ok) { return { getContentData: (binary) => (binary ? res.arrayBuffer() : res.text()) } } else if (res.status === 404) { return `` } else { throw Object.assign(new Error(url + ' ' + res.statusText), { res }) } }) }, // 追加样式HTML addStyle(style) { const before = document.head.getElementsByTagName('style')[0] || null const object = Object.assign(document.createElement('style'), { textContent: style }) document.head.insertBefore(object, before) }, // 输出日志信息 log(type, ...args) { console.log(type, ...args) }, } const { loadModule } = window['vue3-sfc-loader'] const loadVue = (vuePath) => loadModule(vuePath, options) // @ts-ignore const router = VueRouter.createRouter({ routes: [], // @ts-ignore history: VueRouter.createWebHashHistory(), }) // 创建后台主路由 router.addRoute({ name: 'layout', path: '/', component: () => { return loadVue('/static/template/layout.vue') }, children: [{ path: '/', redirect: '/static/template/login.vue' }], }) // 动态注销路由 router.afterEach(function (to) { let name = to.fullPath.replace(/[.\/]+/g, '_') if (router.hasRoute(name)) router.removeRoute(name) if (loading) (loading = loading.close()), null // @ts-ignore document.querySelectorAll('.think-page-loader').forEach((el) => (el.style.display = 'none')) }) // 动态注册路由 let loading = null // @ts-ignore router.beforeEach(function (to, fr, next) { let name = to.fullPath.replace(/[.\/]+/g, '_') if (router.hasRoute(name)) { console.log('PAGE-LOADING:', to.fullPath) // @ts-ignore loading = ElementPlus.ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)', }) next() } else { // 删除页面缓存 delete options.moduleCache[to.fullPath] // 登录页面处理 if (to.fullPath.indexOf('/login.vue') > -1) { router.addRoute({ name: name, path: to.fullPath, component: () => loadVue(to.fullPath) }) } else { // 动态注册路由并触发新路由 router.addRoute('layout', { name: name, path: to.fullPath, component: () => loadVue(to.fullPath) }) } next({ name: name }) } }) // 创建 Vue 应用 // @ts-ignore const app = Vue.createApp({}) app.directive('href', { mounted(el, binding) { console.log(el) el.addEventListener( 'click', (e) => { e.stopPropagation() if (binding.value) { router.push(binding.value) } }, { passive: false } ) }, unmounted(el) { // 移除点击事件监听器 el.removeEventListener('click') }, }) // 定义全局缓存,加载字体组件 // @ts-ignore app.cache = { loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue } for (let i in app.cache.icons) app.component(i, app.cache.icons[i]) // 注册 getApp 获取应用 // @ts-ignore window.getApp = () => app // 应用组件及路由 // @ts-ignore app.use(ElementPlus).use(router).mount(document.body) })().catch((ex) => console.error(ex))