目前初次碰到umi的项目,自我总结,方便以后学习
defaultSettings.js 默认设置
` const proSettings = {
navTheme: 'dark', // theme for nav menu
primaryColor: '#1890FF', // primary color of ant design
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: false, // sticky header
autoHideHeader: false, // auto hide header
fixSiderbar: false, // sticky siderbar
TreeHoverBackgroundColor: '#f5f5f5', // 树组件Hover事件背景颜色
TreeSelectBackgroundColor: '#f3fafd', // 树组件Select事件背景颜色
};
export default proSettings; `
这个文件是对全局下的引入组件的设置
`config.js 相当于webpack的配置
// https://umijs.org/config/
import { defineConfig } from 'umi';
import slash from 'slash2';
import defaultSettings from './defaultSettings';
import routes from './router.config';
import packageJson from '../package.json';
import proxy from './proxy';
const isMock = process.env.MOCK === 'true';
export default defineConfig({
hash: true,
antd: {},
dva: {
hmr: true,
},
locale: {
// default zh-CN
default: 'zh-CN',
// 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: {
// ...darkTheme,
'primary-color': defaultSettings.primaryColor,
},
title: false,
extraBabelPlugins: [['import', { libraryName: 'dtd', libraryDirectory: 'es', style: true }]],
ignoreMomentLocale: true,
lessLoader: {
javascriptEnabled: true,
},
cssLoader: {
modules: {
getLocalIdent: (context, _, localName) => {
if (
context.resourcePath.includes('node_modules') ||
context.resourcePath.includes('ant.design.pro.less') ||
context.resourcePath.includes('global.less')
) {
return localName;
}
const match = context.resourcePath.match(/src(.*)/);
if (match && match[1]) {
const antdProPath = match[1].replace('.less', '');
const arr = slash(antdProPath)
.split('/')
.map((a) => a.replace(/([A-Z])/g, '-$1'))
.map((a) => a.toLowerCase());
return `${packageJson.name}${arr.join('-')}-${localName}`.replace(/--/g, '-');
}
return localName;
},
},
},
manifest: {
basePath: '/',
},
// proxy: proxy[isMock ? 'mock' : 'dev'],
proxy: {
'/api': {
target: 'http://10.160.0.244:8090/gsgx/',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
});
3.
`proxy.js 代理配置
/**
* 在生产环境 代理是无法生效的,所以这里没有生产环境的配置
* The agent cannot take effect in the production environment
* so there is no configuration of the production environment
* For details, please see
* https://pro.ant.design/docs/deploy
*/
const mock = {
target: 'http://yapi.reta-develop.dophz.网址.com',
prefix: '/mock/1437',
};
export default {
dev: {
'/api/': {
target: 'https://preview.pro.ant.design',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
test: {
'/api/': {
target: 'https://preview.pro.ant.design',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
pre: {
'/api/': {
target: 'your pre url',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
mock: {
'/sys/api/': {
target: mock.target,
changeOrigin: true,
pathRewrite: { '/sys/api/': `${mock.prefix}/sys/api/` },
},
'/static/copyright.json': {
target: mock.target,
changeOrigin: true,
pathRewrite: { '/static/copyright.json': `${mock.prefix}/static/copyright.json` },
},
},
};
这个配置目前还不太了解,只知道是服务器代理
router.config.js 路由配置-- 侧边导航
`
export default [ { path: '/', component: '../layouts/BasicLayout', routes: [ { path: '/', redirect: '/dataDemand/putForwardDemand' }, { path: '/dataDemand', name: '数据需求', icon: 'sidebarIcon-homePage2', routes: [ { path: '/dataDemand/putForwardDemand', name: '需求提出', icon: 'sidebarIcon-homePage2', component: '@/pages/dataDemand/putForwardDemand/index' }, { path: '/dataDemand/putForwardDemand/detailDemand', component: '@/pages/detailDemand/index' }, { path: '/dataDemand/demandList', name: '需求清单', icon: 'sidebarIcon-homePage2', component: '@/pages/dataDemand/demandList/index' }, { path: '/dataDemand/demandList/detailDemand', component: '@/pages/detailDemand/index' }, { path: '/dataDemand/putForwardDemand/addDemand', component: '@/pages/addDemand/index' } ]
},
{
path: '/dataProvide',
name: '数据供给',
icon: 'sidebarIcon-homePage2',
routes: [
{
path: '/dataProvide/dutiesList',
name: '责任清单',
icon: 'sidebarIcon-homePage2',
component: '@/pages/dataProvide/dutiesList/index'
},
{
path: '/dataProvide/dutiesList/detailDemand',
component: '@/pages/detailDemand/index'
},
{
path: '/dataProvide/resourceMount',
name: '资源挂载',
icon: 'sidebarIcon-homePage2',
component: '@/pages/dataProvide/resourceMount/index'
}
]
},
{
path: '/supplyDemandApproval',
name: '供需审批',
icon: 'sidebarIcon-homePage2',
routes: [
{
path: '/supplyDemandApproval/pendingApproval',
name: '待审批',
icon: 'sidebarIcon-homePage2',
component: '@/pages/supplyDemandApproval/pendingApproval/index'
},
{
path: '/supplyDemandApproval/pendingApproval/detailDemand',
component: '@/pages/detailDemand/index'
},
{
path: '/supplyDemandApproval/approved',
name: '已审批',
icon: 'sidebarIcon-homePage2',
component: '@/pages/supplyDemandApproval/approved/index'
},
{
path: '/supplyDemandApproval/approved/detailDemand',
component: '@/pages/detailDemand/index'
},
]
},
]
},
],
},
];
`
`
`