初识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://xxx.yyy.com/',
'changeOrigin': true,
'pathRewrite': { '^/api' : '' },
},
},
}
注意：proxy 配置仅在 dev 时生效
然后访问 /api/users 就能访问到 http://xxx.yyy.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' },
],
},
],
};
