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 | （数字） | 横向的视口宽度。 |