antd pro4(umijs 3.2.14) 解决IE适配问题_antdpro 适配ie11

• 修改config/config.ts

  dva: {
    hmr: true,
    immer: { enableES5: true }//如需兼容 IE11，需配置
  },
1
2
3
4

  targets: {
    ie: 11,
  },
1
2
3

  //如果适配ie11 请注释下面esbuild
  // esbuild: {},
1
2

// https://umijs.org/config/
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,
    immer: { enableES5: true }//如需兼容 IE11，需配置
  },
  history: {
    type: 'browser',//hash, 默认是 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: '/',
  },
  //如果适配ie11 请注释下面esbuild
  // esbuild: {},
  base: '/static/admin/',
  publicPath: '/static/admin/',
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

• 判断是否是IE浏览器

/**
 * 判断是否是IE浏览器
 * @returns 
 */
export const isIE = (): boolean => {
  const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
  const isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
  const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
  return isIE || isIE11
}
1
2
3
4
5
6
7
8
9
10
11

• 解决IE浏览器get请求缓存问题

    if (options.method == "get" && isIE()) {
        options.params = { ...options.params, t: new Date().getTime() }
    }
1
2
3

/**
 * request拦截器, 改变url 或 options.
 * @returns 
 */
export const requestOpt = (url: string, options: RequestOptionsInit): object => {
    if (options.method == "get" && isIE()) {
        options.params = { ...options.params, t: new Date().getTime() }
    }
    if (process.env.NODE_ENV === 'development') {
        console.log("url==>", url)
        if (options.data) {
            console.log("options.data==>", JSON.stringify(options.data))
        } else if (options.params && Object.keys(options.params).length > 0) {
            console.log("options.params==>", options.params)
        }
    }
    if (process.env.NODE_ENV === 'development' && !options.prefix) {
        url = '/api' + url
    }

    const headers = {
        'token': getToken(),
    };
    return {
        url: url,
        options: { ...options, headers },
    };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 修改公共样式global.less

// 兼容IE11
@media screen and(-ms-high-contrast: active),
(-ms-high-contrast: none) {

  //这里的样式在IE11中执行
  body .ant-design-pro>.ant-layout {
    min-height: 100vh;
  }

  //修改ProComponents Modal样式
  .ant-modal-content>.ant-modal-body>.ant-row {
    display: block;
  }

  .ant-pro-table>.ant-pro-table-search>.ant-form>.ant-row>.ant-col>.ant-form-item>.ant-form-item-control>.ant-form-item-control-input {
    display: block;
    margin-left: 1px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

修改部分样式在IE上的问题