全局:模拟数据(umi还可以局部mock)
umi遍历此目录下所有的 .js 文件,包括 _ 前缀的,进行解析。
在mock文件中这么写
export default {
'/api/users': ['a', 'b'],
};
当程序跑起来后,就可以这样访问:
http://localhost:8000/api/users
在配置文件中,指定mock.exclude配置,如下
export default {
mock: {
exclude: ['mock/**/_*.js', 'mock/_*/**/*.js'],
},
};
里面配置路由的(关于路由类型,得专门研究,如约定式路由,配置式路由)
默认的 build 输出目录,如果不想在这里输出,可通过配置 outputPath 修改。
默认的源码目录设定在这,在umi中,如果没有这个目录,就会以整个目录做源码目录。
dev 开发环境下产生的临时目录,里面是项目运行时的临时文件,平时可以在这里看看router文件等。
build 临时目录,umi build 命令的生产模式下会有这个临时文件。
里面放着全局布局,可以是网页中的一些基础框架布局,甚至在Antd Pro 中 安全认证布局也放在这(登录权限认证等,像是一个中间件的逻辑) 。
没有全局路由时候的配置:
[
{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },
]
如果有用到全局布局,就应该这么写:
[
{ path: '/', component: './layouts/index', routes: [
{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },
] }
]
页面目录,如我在config.js中配置路由,组件路径为 “./”,其所指向就是这个page目录。
里面的文件即路由,如 约定式路由,规定文件即路由(js、jsx、ts 和 tsx 文件)。
4.4.1 document.ejs
这里是html模板,你可以在这里修改项目在浏览器中的一些参数,如title,meta等等,最重要的是
4.4.2 404.js
404 页面
4.4.3 XXX.js
xxx页面 ,任意命名,umi.js会导出响应的react 组件。
4.4.4 xxx.test.js
用例文件,umi test
会匹配所有 .test.js 和 .e2e.js 结尾的文件。
约定的全局样式文件,在平时写页面时,如用到了less处理,可以在局部页面中用:global作局部修改。
可以在这里加入 polyfill,p(olyfill是一些让原生浏览器支持的代码,反正是跟浏览器兼容相关的。)
此文件会在入口文件的最前面被自动引入,可以在这里加载补丁,做一些初始化的操作等,如Antd Pro 的pwa相关配置就在这。
运行时配置文件,在Antd pro 中没有用到这样配置。
我们可以在这里扩展运行时的能力,比如修改路由、修改 render 方法等。
测试文件,umi test 会查找所有的 .test.js 和 .e2e.js 文件来跑测试。
umi 配置,同 config/config.js,二选一,Antd pro 选择了config/config.js。
整个项目的环境变量,Ant pro 项目中没有用到。
本地化的系统环境变量,该文件通常不用提交到代码仓库。本地启动时, 相同内容 .env.local 会覆盖 .env 。
这个就不需要多说了。