Umi
平庆
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, 默认 browser
ignoreMomentLocale: 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.env
if ( 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=3000
BABEL_CACHE=none
XX_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) // OK
2 相关操作
let host = ''
if (envType === "dev") {host = "www.baidu.com"} // return host
if (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
类似资料：