# umi-2301

**Repository Path**: connerljlx_admin/umi-2301

## Basic Information

- **Project Name**: umi-2301
- **Description**: 2301班umi基础
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-27
- **Last Updated**: 2023-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目录结构分析
```
config
  config.ts
src
  .umi 目录 运行时生成临时文件 千万不要动
  assets 存储开发的静态资源
  layout 
    根组件 类似于 vueCli Cra 里面 App组件
  pages 
    存储 路由组件
.umirc.ts // 与 config/config 文件 2 选一 umi配置文件， 和 config/config.ts 二选一
```

# umi路由
## 约定式  在配置中不定义路由，按照 umi约定的 路由组件定义规范 定义路由组件，自动生成路由
要求在pages目录中 按照一定规则定义路由组件即可

```
pages
  index.tsx
生成
{
  path: '/',
  component: 'index'
}


pages
  news.tsx
生成
{
  path: '/news',
  component: 'news'
}

路由组件定义在目录中
pages
  news
    index.tsx
生成
{
  path: '/news',
  component: 'news'
}
```

## 配置型路由
https://umijs.org/docs/guides/routes#%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1

```ts
export default [
  {
    path: '/home',
    component: 'home'
  },
  {
    path: '/news',
    routes: [
      {
        path: '/news',
        redirect: '/news/native'
      },
      {
        path: '/news/native',
        component: 'news/components/native'
      },
      {
        path: 'abroad',
        component: 'news/components/abroad'
      }
    ],
    component: 'news'
  },
  {
    path: '/about',
    wrappers: [
      '@/auth'
    ],
    component: 'about'
  },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    component: 'login'
  },
  {
    path: '*',
    component: 'notFound'
  }
]
```


# umi 自定义环境变量
+ 安装cross-env
```js
npm i cross-env -S
```
+ 定义 生产环境配置 和开发环境配置 以 config/config.ts举例

以下定义开发环境环境变量 npm run dev 默认走 config/config.ts 这个文件，在这里定义环境变量即可

```js
import { defineConfig } from "umi";
export default defineConfig({
  // 定义全局变量
  define: {
    'process.env': {
      NODE_ENV: 'dev',
      UMI_ENV: 'dev',
      UMI_BASE_URL: '/conner'
    }
  }
});
```
+ 定义生产环境环境变量 定义 config/config.prod.ts
```js
import { defineConfig } from "umi";
export default defineConfig({
// 定义全局变量
define: {
  'process.env': {
    NODE_ENV: 'prod',
    UMI_ENV: 'prod',
    UMI_BASE_URL: '生产环境源'
  }
}
});
```
+ package.json脚本中指定当前项目处于什么环境
```json
"scripts": {
    // npm run dev默认就是开发环境 默认会走 config/config.ts
    "dev": "set PORT=3000&&umi dev",
    // 手动指定 是生产环境 走 config/config.prod.ts
    "build": "cross-env UMI_ENV=prod umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev"
  },
```
+ 获取
```js
process.env.xxx
```

# umi生成器