在umijs中的.umirc.ts文件常用配置 和 postcss-px-to-viewport插件的配置

umijs中文文档 https://umijs.org/zh-CN
umijs中.umirc.ts文件配置说明：https://umijs.org/zh-CN/config

umijs配置文件.umirc.ts

import { defineConfig, Redirect } from 'umi';
import px2vw from 'postcss-px-to-viewport';

export default defineConfig({
    // 配置主题，实际上是配 less 变量（Ant Design 的样式变量）。
    theme: {
    	//全局主色
        '@primary-color': '#1890FF',  // 更多变量说明：https://ant.design/docs/react/customize-theme-cn
    },
    // 配置额外 CSS
    styles: [
        `body { color: red; }`,
        `https://www.xxx.com/abc.css`
    ],
    // 配置全局标题。
    title: 'xxx',
    // 配置mock 模拟数据 默认为true。		
    mock: false,
    // 配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。
    hash: true,
    // 配置需要兼容的浏览器最低版本
    targets: {
        ie: 11
    },
    // 指定输出路径
    outputPath: '/dist',
    // 设置 node_modules 目录下依赖文件的编译方式。
    nodeModulesTransform: {
        type: 'none',
    },
    history: {
        type: 'browser' // 可选 browser、hash 和 memory
    },
    //配置路由 注：如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。
    routes: [
        { path: '/', component: '@/pages/index' },
        {
            path: '/user',
            component: '@/pages/user/index',
            routes: [
                { path: '/', component: '@/pages/user/user', title: '用户中心' },
                { path: '/user/info/:id?', component: '@/pages/user/info/[id]', title: '详情' },
                { path: '/user/name', component: '@/pages/user/name' },
                { component: '@/pages/404' }
            ]
        },
        { component: '@/pages/404' }
    ],
    // 本地开发API接口请求代理
    proxy: {
        '/api': {
            target: 'http:www.xxx.com/',
            changeOrigin: true,
            pathRewrite: { '^/api': '' }
        }
    },
    // 快速刷新(开发时可以保持组件状态，同时编辑提供即时反馈。)
    fastRefresh: {},
    // 配置额外的 umi 插件。
    plugins: [
        `${__dirname}/plugin.js`,
    ],
    // 配置额外的 postcss 插件(px 转 vw|vh)
    extraPostCSSPlugins: [
        px2vw({
            unitToConvert: 'px', 		// 要转化的单位
            viewportWidth: 1920, 		// 视窗的宽度，可根据自己的需求调整（这里是以PC端为例）
            viewportHeight: 1080, 		// 视窗的高度
            unitPrecision: 6, 			// 转换后的精度，即小数点位数
            propList: ['*'], 			// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', 		// 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', 	// 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['wrap'],// 指定不转换为视窗单位的类名，
            minPixelValue: 1, 			// 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, 			// 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, 				// 是否转换后直接更换属性值
            exclude: [/node_modules/], 	// 设置忽略文件，用正则做目录名匹配
            landscape: false, 			// 是否处理横屏情况
        })
    ],
});

1、UmiJs默认插件说明：

@umijs/preset-react插件集说明：https://umijs.org/zh-CN/plugins/preset-react

2、postcss-px-to-viewport插件配置：

它是 PostCSS 的一个插件，它从像素单位生成视口单位（vw、vh、vmin、vmax）。
PostCss-Px-To-Viewport 插件可将css中的px单位 自动转换 成viewport（vw/vh）单位
postcss-px-to-viewport插件地址：https://www.npmjs.com/package/@ttou/postcss-px-to-viewport

postcss-px-to-viewport插件的安装

npm install -D postcss-px-to-viewport
或：
yarn add postcss-px-to-viewport -D

具体参数说明：

参数	参数值类型	说明
unitToConvert	(String)	要转换的单位，【默认为 px】。
viewportWidth	（数字）	视口的宽度。
unitPrecision	(Number)	允许 vw 单位增长到的十进制数。
propList	（数组）	可以从 px 更改为 vw 的属性。 值需要完全匹配。 使用通配符 * 启用所有属性。例子： [’*’] 在单词的开头或结尾使用 。([’ position ‘] 将匹配 background-position-y) 用 ！不匹配属性。示例：[’’, ‘!letter-spacing’] 将“not”前缀与其他前缀组合在一起。示例：[’ ', '!font ']
viewportUnit	（字符串）	预期单位。
fontViewportUnit	（字符串）	字体的预期单位。
selectorBlackList	（数组）	要忽略并保留为 px 的选择器。 如果值是字符串，它会检查选择器是否包含字符串。 [‘body’] 会匹配 .body-class 如果 value 是 regexp，它会检查选择器是否与 regexp 匹配。 [/^body$/]将匹配body但不匹配.body
minPixelValue	（数字）	设置要替换的最小像素值。
mediaQuery	（布尔值）	允许在媒体查询中转换 px。
replace	（布尔值）	替换包含 vw 的规则而不是添加回退。
exclude	（数组或正则表达式）	忽略一些文件，如“node_modules” 如果值为正则表达式，将忽略匹配文件。 如果值为数组，则数组的元素为正则表达式。
landscape	（布尔值）	@media (orientation: landscape)与通过landscapeWidth.
landscapeUnit	（字符串）	landscape选项的预期单位
landscapeWidth	（数字）	横向的视口宽度。