快速上手UmiJS

快速上手

UmiJS官方文档

目录结构

项目目录结构

.editorconfig  编辑配置文件
.gitignore  Git忽略文件
.prettierignore  格式化代码时忽略的文件
.prettierrc  格式化代码的配置
.umirc.ts  umi配置文件
tsconfig.json  typescript配置文件
typings.d.ts  typescript类型定义文件

常用配置

hash

配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存

-  Type: boolean
-  Default: false
启用 hash 后，产物通常是这样， html 文件始终没有 hash
+ dist
  - logo.sw892d.png
  - umi.df723s.js
  - umi.8sd8fw.css
  - index.html

base

设置路由前缀，通常用于部署到非根目录

-   Type: string
-   Default: /
比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到之前的路由。

publicPath

配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以

-   Type: publicPath
-   Default: /
publicPath: 'https://www.your-app.com/foo/'

outputPath

指定输出路径

-   Type: string
-   Default: dist
注意：
-   不允许设定为 src、public、pages、mock、config 等约定目录

title

配置标题

-   Type: string
-   Default: ''
export default {
  title: 'hi',
};

此外，你还可以针对路由配置标题，比如，

export default {
  title: 'hi',
  routes: [
    { path: '/', title: 'Home' },
    { path: '/users', title: 'Users' },
    { path: '/foo' },
  ],
};

然后我们访问 / 标题是 Home，访问 /users 标题是 Users，访问 /foo 标题是默认的 hi

history

-   Type: object
-   Default: { type: 'browser' }
包含以下子配置项：
-   type，可选 browser、hash 和 memory
-   options，传给 create{{{ type }}}History 的配置项，每个类型器的配置项不同

注意，
-   options 中，getUserConfirmation 由于是函数的格式，暂不支持配置
-   options 中，basename 无需配置，通过 umi 的 base 配置指定

targets

配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换

-   Type: object
-   Default: { chrome: 49, firefox: 64, safari: 10, edge: 13, ios: 10 }

比如要兼容 ie11，需配置：
export default {
  targets: {
    ie: 11,
  },
};

注意：
-   配置的 targets 会和合并到默认值，不需要重复配置
-   子项配置为 false 可删除默认配置的版本号

proxy

配置代理

-   Type: object
-   Default: {}
export default {
  proxy: {
    '/api': {
      'target': 'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },
}
注意：proxy 配置仅在 dev 时生效

然后访问 /api/users 就能访问到 jsonplaceholder.typicode.com/users 的数据 theme

-   Type: object
-   Default: {}

配置主题，实际上是配 less 变量。
比如：
export default {
  theme: {
    '@primary-color': '#1DA57A',
  },
};

routes

配置路由

-   Type: `Array(route)`
export default {
  routes: [
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/user', redirect: '/user/login' },
        { path: '/user/login', component: './user/login' },
      ],
    },
  ],
};