2024-04-18 Umi配置文件简读

 Umi配置文件通常为.umirc.js或者config/config.js，这两个文件的作用是相同的，两个文件都存在时会优先加载 `.umirc.js`，请只使用其中一个来作为配置项！以下是其常见配置项：

官方给出的配置文档：https://umijs.org/docs/api/config

import { defineConfig } from "umi";
// 使用 defineConfig 包裹配置是为了在书写配置文件的时候，能得到更好的拼写联想支持。如果你不需要，直接 export default {} 也可以。

export default defineConfig({
  history: { type: "browser" }, // 和 history 相关的操作，用于获取当前路由信息、执行路由跳转、监听路由变更，共有两个值：browser、hash，默认是 browser，前者表示使用browser的history，后者则是使用url的history
  hash: true, // 配置是否让生成的文件包含hash后缀。这通常用于增量发布和避免浏览器加载缓存，确保当文件内容发生变化时，其文件名（特别是静态资源文件）也会发生变化，从而强制浏览器重新下载最新的文件。

  antd: {
    // antd组件的一些设置
    // configProvider
    configProvider: {},
    // themes
    dark: true,
    compact: true,
    // babel-plugin-import
    import: true,
    // less or css, default less
    style: "less",
    // shortcut of `configProvider.theme`
    // use to configure theme token, antd v5 only
    theme: {},
    // antd <App /> valid for version 5.1.0 or higher, default: undefined
    appConfig: {},
    // Transform DayJS to MomentJS
    momentPicker: true,
    // Add StyleProvider for legacy browsers
    styleProvider: {
      hashPriority: "high",
      legacyTransformer: true,
    },
  },

  proxy: {
    // 配置代理功能 然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。注意：proxy 功能仅在 dev 时有效。
    "/api": {
      target: "http://jsonplaceholder.typicode.com/",
      changeOrigin: true,
      pathRewrite: { "^/api": "" },
    },
  },

  locale: {
    // 国际化
    default: "zh-CN",
    // default true, when it is true, will use `navigator.language` overwrite default
    antd: true,
    baseNavigator: true,
  },
  dynamicImport: {
    loading: "xxx包", // 配置动态导入（code splitting）的行为。动态导入允许你在运行时加载代码块，这有助于优化大型应用的初始加载时间。
  },
  targets: {
    ie: 10, // 配置需要兼容的浏览器最低版本。Umi 会根据这个自定引入 polyfill、配置 autoprefixer 和做语法转换等。
  },
  routes: [],
  // 在 Umi 应用是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
  // umi 路由表 https://umijs.org/docs/guides/routes
  theme: {
    "primary-color": "#1890ff", // 配置主题。如果你使用了某些支持主题配置的插件（如 Ant Design），你可以在这里定义主题变量来覆盖默认样式。 // antd 主题: https://ant.design/docs/react/customize-theme-cn
  },
  define: {
    COORSIZE19: "19px", // 设置全局变量，此时console.log(COORSIZE19);会打印出19px
  },
  ignoreMomentLocale: true, // 忽略 moment 的 locale 文件，用于减少产物尺寸。默认开启（true），false 关闭
  lessLoader: {}, // 设置 less-loader 的 Options
  cssLoader: {}, // 配置 css-loader
  manifest: {
    // 开启 build 时生成额外的 manifest 文件，用于描述产物。
    basePath: "/",
  },
  chainWebpack: null, // 用于修改webpack配置
   plugins: [], // 配置额外的 Umi 插件。
});

 

Umi版本：v3

React：v16