Open gaomeng965 opened 3 years ago
如上图所示,所有页面都会出现 一屏是loading,滚动下来 一屏是页面内容
config.js ` import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy from './proxy'; import routes from './routes';
const { REACT_APP_ENV } = process.env;
export default defineConfig({ hash: true, antd: {}, dva: { hmr: true, }, history: { type: 'browser', }, locale: { // default zh-CN default: 'zh-CN', antd: true, // default true, when it is true, will use navigator.language overwrite default baseNavigator: true, }, dynamicImport: { loading: '@/components/PageLoading/index', }, targets: { ie: 11, }, // umi routes: https://umijs.org/docs/routing routes, // Theme for antd: https://ant.design/docs/react/customize-theme-cn theme: { 'primary-color': defaultSettings.primaryColor, }, title: false, ignoreMomentLocale: true, proxy: proxy[REACT_APP_ENV || 'dev'], manifest: { basePath: '/', }, esbuild: {}, qiankun: { master: { apps: [ { name: 'vueBase', entry: '//localhost:7101', }, ], }, }, }); routes.js export default [
navigator.language
routes.js
{ path: '/', component: '../layouts/BlankLayout', routes: [ { path: '/user', component: '../layouts/UserLayout', routes: [ { name: 'login', path: '/user/login', component: './User/login', }, ], }, { path: '/', component: '../layouts/SecurityLayout', routes: [ { path: '/', component: '../layouts/BasicLayout', authority: ['admin', 'user'], routes: [ { path: '/', redirect: '/welcome', }, { path: '/welcome', name: 'welcome', icon: 'smile', component: './Welcome', }, { path: '/admin', name: 'admin', icon: 'crown', component: './Admin', authority: ['admin'], // routes: [ // { // path: '/admin/sub-page', // name: 'sub-page', // icon: 'smile', // component: './Welcome', // authority: ['admin'], // }, // ], routes: [ { path: '/admin/saasAdmin#/index', name: 'saasAdmin', icon: 'smile', component: './Welcome', }, ], }, { name: 'list.table-list', icon: 'table', path: '/list', component: './TableList', }, { name: 'vueBase', icon: 'smile', path: '/vueBase', microApp: 'vueBase', }, { component: './404', }, ], }, { component: './404', }, ], }, ], }, { component: './404', }, ]; `
主应用里面的 document.ejs 去掉
开启qiankun了以后,会渲染到root-master这个节点上,需要手动在umi的config里面配置mountElementId:"root",或者修改document.ejs的id
mountElementId:"root"
如上图所示,所有页面都会出现 一屏是loading,滚动下来 一屏是页面内容
config.js ` import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy from './proxy'; import routes from './routes';
const { REACT_APP_ENV } = process.env;
export default defineConfig({ hash: true, antd: {}, dva: { hmr: true, }, history: { type: 'browser', }, locale: { // default zh-CN default: 'zh-CN', antd: true, // default true, when it is true, will use
navigator.language
overwrite default baseNavigator: true, }, dynamicImport: { loading: '@/components/PageLoading/index', }, targets: { ie: 11, }, // umi routes: https://umijs.org/docs/routing routes, // Theme for antd: https://ant.design/docs/react/customize-theme-cn theme: { 'primary-color': defaultSettings.primaryColor, }, title: false, ignoreMomentLocale: true, proxy: proxy[REACT_APP_ENV || 'dev'], manifest: { basePath: '/', }, esbuild: {}, qiankun: { master: { apps: [ { name: 'vueBase', entry: '//localhost:7101', }, ], }, }, });routes.js
export default [{ path: '/', component: '../layouts/BlankLayout', routes: [ { path: '/user', component: '../layouts/UserLayout', routes: [ { name: 'login', path: '/user/login', component: './User/login', }, ], }, { path: '/', component: '../layouts/SecurityLayout', routes: [ { path: '/', component: '../layouts/BasicLayout', authority: ['admin', 'user'], routes: [ { path: '/', redirect: '/welcome', }, { path: '/welcome', name: 'welcome', icon: 'smile', component: './Welcome', }, { path: '/admin', name: 'admin', icon: 'crown', component: './Admin', authority: ['admin'], // routes: [ // { // path: '/admin/sub-page', // name: 'sub-page', // icon: 'smile', // component: './Welcome', // authority: ['admin'], // }, // ], routes: [ { path: '/admin/saasAdmin#/index', name: 'saasAdmin', icon: 'smile', component: './Welcome', }, ], }, { name: 'list.table-list', icon: 'table', path: '/list', component: './TableList', }, { name: 'vueBase', icon: 'smile', path: '/vueBase', microApp: 'vueBase', }, { component: './404', }, ], }, { component: './404', }, ], }, ], }, { component: './404', }, ]; `