Ant design Pro 项目部署后打不开问题解决

1.解决静态资源引用路径问题
首先在network中进行排查,若出现图片等静态资源无法打开,就查看引用路径是否正确.一般我们直接打包过来的引用路径是没有前缀的,但是根据个人部署情况的特殊性,可能导致整体项目前会有相对路径,这时就需要我们在config.ts文件中进行相关设置.
示例:

{
  base: '/imedical/web/service/emrquality/dist/',
  publicPath: '/imedical/web/service/emrquality/dist/',
}

2.接口连接不成功问题
需要设置下环境等相关信息

http.ts中添加判断环境代码

const url = REACT_APP_ENV === 'prod' ? SERVER_API : '/api/';

services/constant.ts 添加接口地址

export const SERVER_API = 'http://111.205.6.195:8090/imedical/web/MA.QC.COM.RequestCommon.cls';

package.json中添加打包设置

    "build": "cross-env REACT_APP_ENV=prod umi build",
    "build:dev": "cross-env REACT_APP_ENV=dev umi build",
    "build:test": "cross-env REACT_APP_ENV=test umi build",
    "build:gray": "cross-env REACT_APP_ENV=gray umi build",

3.部署后打开项目出现404页面问题
设置为hash模式

  history: { type: 'hash' },