umi+Ant Design Mobile+rem搭建移动端H5框架

1.创建项目

yarn create @umijs/umi-app

2.安装Ant Design Mobile

yarn add antd-mobile

3.安装postcss-plugin-px2rem

cnpm i postcss-plugin-px2rem

4.配置 /.umirc.ts

/*
 * @Author: muge
 * @Date: 2021-12-29 10:41:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-01 14:20:16
 */
import { defineConfig } from 'umi';
import px2rem from 'postcss-plugin-px2rem';
import path from 'path';
import { domain } from './src/request/index';
const root:string = '/Text/'
export default defineConfig({
  base: root, //部署到非根目录时才需配置
  publicPath:root, //静态资源
  targets: {
    //配置浏览器最低版本,比如兼容ie11
    ie: 9,
  },
  hash: true, //开启打包文件的hash值后缀
  nodeModulesTransform: {
    type: 'none',
  },
  metas: [{ charset: 'utf-8' }],
  routes: [
    {
      path: '/',
      component: '@/pages/index',
      title: '主页',
    },
  ],
  fastRefresh: {},
  proxy: {
    '/api': {
      target: domain,
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
  extraPostCSSPlugins: [
    px2rem({
      rootValue:18.75 , // 兼容 ant mobile
      propBlackList:['border','border-top','border-left','border-right','border-bottom','border-radius','font-size'],//这些属性不需要转换
    }),
  ],
  antd:{
    mobile:false //如果引入 组件报错样式问题，需要配置这个
  }
});

5.请求拦截

在/src 下新建app.tsx
 /*
 * @Author: muge
 * @Date: 2021-12-29 18:39:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 17:11:32
 */
import { RequestConfig } from 'umi';
const token='JWT ...'
const requestInterceptor = (url: string, options: any) => {
  options.headers = {
    Authorization: token,
  };
  options.interceptors = true;
  return {
    url,
    options,
  };
};
export const request: RequestConfig = {
  requestInterceptors: [requestInterceptor],
};

6.项目启动

yarn start

项目demo地址