1 项目目录

官方文档 -> https://umijs.org/zh-CN### 项目目录结构  (没有的就自己创建)
------------------------------------------------------------------------------
├── config                   # umi 配置，包含路由，构建等配置 +++├── config.js   +++      # 对应的配置文件
├── mock                     # 本地模拟数据
├── public                   # 一些公共静态资源  +++
├── src
│   ├── assets               # 本地静态资源 ++++++
│   ├── components           # 业务通用组件 ++++++
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局 ++++++
│   ├── models               # 全局 dva model ++++++
│   ├── pages                # 业务页面入口和常用模板 ++++++
│   ├── services             # 后台接口服务, 集中管理接口路径的 ++++++
│   ├── utils                # 工具库, Axios, 数据请求的二次封装等 ++++++
│   ├── locales              # 国际化资源 ++++++
│   ├── service-worker.js    # 用于做缓存的 ++++++
│   ├── manifest.json        # 是扩展的配置文件 ++++++
│   ├── global.less          # 全局样式 ++++++
│   └── global.jsx           # 全局 JS ++++++
├── tests                    # 测试工具
├──.editorconfig  //编辑器配置文件
├──.gitignore  //git忽略配置文件
├──.env  //环境变量, 初始化项目的时候没有该文件, 需要手动添加
├──.env.example
├──.prettierignore  //代码格式化时忽略的文件配置
├──.prettierrc  //代码格式化的规范配置
├──.eslintignore  //代码规范
├──.eslintrc.js   //代码规范
├──.umirc.ts   (可用于写一些简单配置, 记住若想 config 生效需要删除这个文件)
├── jest.config.js
├── README.md
└── package.json----------------------------- 注意事项 --------------------------------1 .umirc 如果存在, 那么 config 中的配置是不生效的 (二存一)  //都不存在默认约定式路由2 npm run eject  //把 webpack.config.js 配置文件暴露出来 -- 慎用暂时不太懂3 组件中展示子路由配置文件的视图容器 -> { props.children } 

2 项目配置

"config.js"export default defineConfig({routes,   // 路由映射表 +++proxy,    // 跨域请求代理配置项 +++hash: true,  //配置是否让生成的文件包含 hash 后缀, 通常用于增量发布和避免浏览器加载缓存 +++title: false,  //title 配置标题; false 表示禁用内置的 title 渲染机制targets: { ie: 11 },   //配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换history: { type: 'browser'},  //type，可选 browser、hash 和 memory, 默认 browserignoreMomentLocale: true,  //默认是 false, true 忽略 moment 的 locale 文件，用于减少尺寸, 属于小优化吧antd: true, //启用后自动配置 babel-plugin-import，实现antd按需加载 (这个不懂先不用)treeShaking: true,   //去除那些引用的但却没有使用的代码, 不确定是否有用 ???base: '/web/',  //部署到非根目录时才需配置publicPath: '/web/', //部署到非根目录和 base 一起使用plugins: [  //配置额外的 umi 插件, 好像不是很必要'umi-plugin-hello'  //插件的参数平级的配置项声明], dva: {hmr: true   // 默认 false 关闭; 表示是否启用 dva model 的热更新 +++},manifest: {basePath: '/'   // 用于给所有文件路径加前缀 +++}dynamicImport: {   //是否启用按需加载, 即是否把构建产物进行拆分, 在需要的时候下载额外的 JS 再执行// 默认关闭 fasle, 省心部署方便, 开启的话还需要进行其他的相关配置loading: '@/components/PageLoading/index'  //子配置项, 不开启也能配置, webpackChunkName: true   //实现有意义的异步文件名, 是属于一定的优化吧},theme: {  // 配置主题, 实际上是配 less 变量'primary-color': defaultSettings.primaryColor,  // 固定的"@primary-color": "#1DA57A"   //可 less 变量}
})

3 环境变量

1 概念 🔶
----------------------------------------------------------------------------------------------1 项目环境 -> 开发环境 (本地) + 测试环境 + 生产环境   // 注意测试和生产环境请求的是不同的数据库2 环境变量 -> 定义变量 -> 让其在不同环境中拥有不同值3 Umi 中存在一些内置环境变量   // 文档 -> 环境变量4 NODE_ENV 特殊环境变量   // 无法区分测试和生产环境const {NODE_ENV} = process.envif ( NODE_ENV === "development" ) { /* 只在开发环境运行的代码 */ }if ( NODE_ENV === "production" ) { /* 只在项目打包后运行的代码 */ }5 自定义环境变量 -> 添加到全局 -> 使用   // 项目打包时不会带 .env 文件的, 默认使用 || 后面的值
----------------------------------------------------------------------------------------------2 设置 🔶
--------------------------------------------------------------------------------------------1 执行命令时添加设置   // 通常会配置 package.json 脚本命令来实现"start": "umi dev"   // 正常启动项目"start": "PORT=3000 umi dev"   // 以 3000 端口号启动项目2 环境变量配置文件中设置   // 根目录下的 .env 文件PORT=3000BABEL_CACHE=noneXX_URL=http://172.21.4.248:81   // 自定义环境变量 -> 需要添加到全局变量中去使用XX_TYPE="string"
--------------------------------------------------------------------------------------------3 添加   // config.js
--------------------------------------------------------------------------------------------
const {XX_URL, XX_TYPE} = process.env   // 找不到为 undefined, 不会报错define: {   // 相当于定义了全局变量XX_TYPE: XX_TYPE || "num",XX_URL: XX_URL || www.baidu.com
}   // 组件中 -> console.log(XX_URL) -> 即可访问
--------------------------------------------------------------------------------------------

4 多份环境配置文件

1 yarn add cross-env   // 用于配置脚本命令2 新建三个文件   // 开发, 测试, 生产
--------------------------------------------------------------------------------------------config.js -> define {"envType": "dev"}   // 非必须定义, 可用来在页面, 区分当前是哪个环境config.test.js -> define {"envType": "test"}config.prod.js -> define {"envType": "pro"}
--------------------------------------------------------------------------------------------3 配置 package.json 脚本命令   // 不同的启动, 打包, 项目的命令 -> 会使用不同的配置文件
--------------------------------------------------------------------------------------------"start_test": "cross-env UMI_ENV=test umi dev"   // 使用 config.test.js 配置文件, 启动项目"start:prod": "cross-env UMI_ENV=prod umi dev"   // 使用 config.prod.js 配置文件, 启动项目"build_test": "cross-env UMI_ENV=test umi build"   // 使用 config.test.js 配置文件, 打包项目"build_prod": "cross-env UMI_ENV=prod umi build"   // 使用 config.prod.js 配置文件, 打包项目
--------------------------------------------------------------------------------------------4 如有判断环境的需求
--------------------------------------------------------------------------------------------1 console.log(envType)   // OK2 相关操作let host = ''if (envType === "dev") {host = "www.baidu.com"}   // return hostif (envType === "pro") {return "http://172.21.4.248:81"}   // 更加简单直接
--------------------------------------------------------------------------------------------

5 跨域请求代理

/*------------------------- 描述 --------------------------------*/1 开发环境中, 访问后端数据, 存在跨域问题, 需要通过 node 后端代理, 来解决浏览器跨域问题2 项目打包后, 跨域请求代理是失效的   // 需要后端允许, 或者部署在同一服务器上/*------------------------- config.js --------------------------------*/
export default {proxy: {'/api': {   // 检测域名后面带 /api/ 的路径'target': 'https://xxx.com/',   // 要请求的域名或IP地址'changeOrigin': true,'pathRewrite': { '^/api' : '' },   // 把域名后面的 /api 去掉},},
}1 自动检测到的路径 -> https://xxx.com/api/xxx
2 然后去请求的路径 -> https://xxx.com/xxx