基于umi的config.js的配置

2,091 阅读2分钟

目前初次碰到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'
              },
            ]
          },
         
            ]
          },
        
        ],
      },
     
    ];

    `
    
    
    
    `
    
    `