2.umi4 默认配置、代理配置、启动配置、页面缓存配置

基于umi实现路由缓存,默认一些配置化

1.安装依赖

    "umi-plugin-keep-alive": "0.0.1-beta.34"

2.config.js中使用

    // https://umijs.org/config/
    import { defineConfig } from '@umijs/max';
    import defaultSettings from './defaultSettings';
    import proxy from './proxy';
    import routes from './routes';
    import deploy from './deploy';
    // const logicalTransformPlugin = require('../postcss/index.js');

    const { PROXY_ENV, DEPLOY_ENV } = process.env;

    export default defineConfig({
      define:{
        DEPLOY_ENV:DEPLOY_ENV||false,
        ...deploy[DEPLOY_ENV || 'mmmm']
      },
      headScripts: [
        { src: '/bamBudget/BWEUM.js' },
        // { src: '/bamMoa/itMoaBridge.js'},
    ],
      base:'/bamBudget/', // 用于外系统做ng反向代理
      publicPath:'/bamBudget/',
      hash: true,
      antd: {},
      request: {},
      initialState: {},
      model: {},
      dva: {
        immer: { enableES5: true },
      },
      mfsu:true,
      layout: {
        // https://umijs.org/zh-CN/plugins/plugin-layout
        locale: true,
        siderWidth: 600,
        ...defaultSettings,
      },
      // https://umijs.org/zh-CN/plugins/plugin-locale
      locale: false,
      targets: {
        ie: 11,
        chrome: 78,
      },
      // umi routes: https://umijs.org/docs/routing
      routes,
      access: {},
      // Theme for antd: https://ant.design/docs/react/customize-theme-cn
      theme: {
        // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
        // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
        // https://ant.design/docs/react/customize-theme-variable-cn
        'root-entry-name': 'default',
        'primary-color': '#0B82FF',
        'layout-header-background': '#0B82FF',
      },
      ignoreMomentLocale: true,
      proxy: proxy[PROXY_ENV || 'local'],
      manifest: {
        basePath: '/',
      },
      
      // 缓存组件
      keepalive:[/admin/,/^\/budget/,/^\/systems\//, /budgetManagement/, /qyjx/,/multidimensionalquery/],
      tabsLayout:{
        hasCustomTabs: true,
        // hasDropdown: true,
      },
      // Fast Refresh 热更新
      fastRefresh: true,
      presets: ['umi-presets-pro'],
      jsMinifier: 'terser',
      // legacy: {
      //   buildOnly: true,
      //   nodeModulesTransform: true
      // },
      // devtool:'eval-cheap-module-source-map',
      // extraPostCSSPlugins:[
      //   logicalTransformPlugin(),
      // ]
    });

默认配置 defaultConfig.js

    import { Settings as LayoutSettings } from '@ant-design/pro-components';

    const Settings: LayoutSettings & {
      pwa?: boolean;
      logo?: string;
    } = {
      navTheme: 'light',
      layout: 'mix',
      splitMenus: true,
      contentWidth: 'Fluid',
      fixedHeader: false,
      fixSiderbar: true,
      colorWeak: false,
      pwa: false,
      iconfontUrl: '',
      title: '管理系统',
      menu: {
        locale: false,
      },
    };

    export default Settings;

proxy 代理

    /**
     * 配置本地开发代理，只有本地起项目时有效
     * 目前先规划两套地址，对应后端的开发环境和相对稳定一些的正式环境
     */

    // 接口所在服务器地址，根据package.json中配置的运行环境变量SERVER_ENV进行区分，
    // 项目初期阶段主要是开发环境和测试环境两个地址
    // dev可以配置为局域网中个人电脑的服务地址，方便和后端同学进行联调
    // uat

    export default {
      local: {
        // 系统管理
        '/bamBudget/cmcc-budget/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' }, 
        },
        '/bamBudget/cmcc-report/': {                           
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 系统管理
        '/bamBudget/cmcc-contract/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        //  请求BIP token时要用到
        '/bamBudget/cas/exclusive/': {
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/cmcc-convert/': {
          target: '',
          changeOrigin: true,
        },
        '/bamBudget/yewu/': {
          target: '',
          changeOrigin: true,
        },
      },
      dev: {
        // 系统管理
        '/bamBudget/cmcc-budget/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        '/bamBudget/cmcc-report/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 系统管理
        '/bamBudget/cmcc-contract/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        //  请求BIP token时要用到
        '/bamBudget/cas/exclusive/': {
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/cmcc-convert/': {
          target: '',
          changeOrigin: true,
        },
        // 多维页面接口地址代理
        '/bamBudget/yewu/': {
          target: '',
          changeOrigin: true,
        },
      },
      uat: {
        // 系统管理
        '/bamBudget/cmcc-budget/': {
          // 要代理的地址
          target: '',
          // target:'',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 系统管理
        '/bamBudget/cmcc-contract/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        //  请求BIP token时要用到
        '/bamBudget/cas/exclusive/': {
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/cmcc-report/': {
          // target: '',
          target:'',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/yewu/': {
          target: '',
          secure: false,
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
      },
      sit: {
        // 系统管理
        '/bamBudget/cmcc-budget/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 系统管理
        '/bamBudget/cmcc-contract/': {
          // 要代理的地址
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        //  请求BIP token时要用到
        '/bamBudget/cas/exclusive/': {
          target: '',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/cmcc-report/': {
          target:'',
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
        // 多维页面接口地址代理
        '/bamBudget/yewu/': {
          target: '',
          secure: false,
          changeOrigin: true,
          pathRewrite: { '^/bamBudget': '' },
        },
      },
    };

配置环境 deploy.js

    export default {
      mmmm: {
        BIP_URL: '', // 产品对应的url
        TENANT_ID: 'm0glac6g', //租户ID
        PROCESS_URL:'',
        DEPLOY_ENV:"mmmm"
      },
      dev: {
        BIP_URL: '', // 产品对应的url
        TENANT_ID: 'm0glac6g ', //租户ID
        PROCESS_URL:'',
        DEPLOY_ENV:"dev"
      },
      uat: {
        BIP_URL: '', // 产品对应的url
        TENANT_ID: 'm0glac6g', //租户ID
        PROCESS_URL:'',
        DEPLOY_ENV:"uat"
      },
      sit: {
        BIP_URL: '', // 产品对应的url
        TENANT_ID: 'm0glac6g', //租户ID
        PROCESS_URL:'',
        DEPLOY_ENV:"sit"
      },
      prd:{
        BIP_URL: '', // 产品对应的url
        TENANT_ID: 'm0glac6g', //租户ID
        PROCESS_URL:'',
        DEPLOY_ENV:"prd"
      }
    };

配置启动命令 package.json

        "start": "npm run start:local",
        "start:local": "cross-env DEPLOY_ENV=mmmm max dev",
        "start:dev": "cross-env PROXY_ENV=dev DEPLOY_ENV=mmmm MOCK=none max dev",
        "start:uat": "cross-env PROXY_ENV=uat DEPLOY_ENV=mmmm MOCK=none max dev",
        "start:sit": "cross-env PROXY_ENV=sit DEPLOY_ENV=mmmm MOCK=none max dev",
        "build": "npm run build:mmmm",
        "build:mmmm": "cross-env DEPLOY_ENV=mmmm max build",
        "build:mobileDev": "cross-env DEPLOY_ENV=dev max build",
        "build:mobileUat": "cross-env DEPLOY_ENV=uat max build",
        "build:mobileSit": "cross-env DEPLOY_ENV=sit max build",
        "build:mobilePrd": "cross-env DEPLOY_ENV=prd max build",

2.路由路径没有发生变化，强制刷新

1.封装方法

    import {KeepAliveContext} from '@umijs/max';
    import React from 'react'
    import { history } from '@umijs/max';

    const layoutTabs = () => {
      const { refreshTab,dropLeftTabs,dropRightTabs,dropOtherTabs,keepElements} = React.useContext(KeepAliveContext);
      const pushAndRefreshTab = (path: string ) => {
        const route = path.split('?')[0]
        history.push(path);
        refreshTab(route)
      }
      return {
        refreshTab,
        dropLeftTabs,
        dropRightTabs,
        dropOtherTabs,
        pushAndRefreshTab
      }
    }


    export default layoutTabs

2.使用方式

    import layoutTabs from '@/utils/tabsTool';
    
    const { pushAndRefreshTab } = layoutTabs();
    
    pushAndRefreshTab(跳转的路由路径)
    pushAndRefreshTab(item.url.replace('/bamBudget', ''));

当页面缓存，还是单页面，导致路由路径相同，但参数不同时，页面不会刷新，需要强制刷新根据状态到编辑页