环境搭建

安装 cross-env

npm install  cross-env -D

注意

• config 下面的 config.ts 是默认的配置文件(里面必须写全了)

• config 下面的 config.development.ts 是开发环境的配置文件(覆盖掉 config.ts)里面的配置 (里面必须写全了)

• config 下面的 config.production.ts 是生产环境的配置文件(覆盖掉 config.ts)里面的配置 (里面必须写全了)

• config 下面的 config.test.ts 是测试环境的配置文件(覆盖掉 config.ts)里面的配置(里面必须写全了)

1.删除项目根目录下面的文件

• 删除 .umirc.ts 文件

2.新建项目根目录下面的文件夹 config

创建文件

目录如下: 创建四个文件

注意

1. 起名字 千万不能用 dev,prod,之类的否则它不执行

2. config.ts 必须有 否则它一直找 development

3. config.xxx.ts 这里面 xxx 对应的就是 package.json 里面的 UMI_ENV=xxx(必须一致)

├── config
│   ├── config.ts
│   ├── config.test.ts
│   ├── config.production.ts
│   └── config.development.ts
├── package.json
├── src
│   ├── .....

config.ts

import { defineConfig } from "umi";

export default defineConfig({
  title: "development",
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  define: {
    "process.env": {
      UMI_ENV: process.env.UMI_ENV,
      DOMAIN: "默认环境",
    },
  },
  npmClient: "pnpm",
});

config.development.ts

import { defineConfig } from "umi";

export default defineConfig({
  define: {
    "process.env": {
      UMI_ENV: process.env.UMI_ENV,
      domain: "开发环境",
    },
  },
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: "pnpm",
});

config.production.ts

import { defineConfig } from "umi";

export default defineConfig({
  define: {
    "process.env": {
      UMI_ENV: process.env.UMI_ENV,
      domain: "正式环境",
    },
  },
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: "pnpm",
});

config.test.ts

import { defineConfig } from "umi";

export default defineConfig({
  define: {
    "process.env": {
      UMI_ENV: "test",
      domain: "测试环境",
    },
  },
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: "pnpm",
});

3.找到 package.json 文件

• 添加脚本

  "scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev",
    "start:devall": "cross-env PORT=3000 UMI_ENV=development MOCK=none umi dev",
    "start:prodall": "cross-env PORT=3001 UMI_ENV=production MOCK=none umi dev",
    "start:testall": "cross-env PORT=3002 UMI_ENV=test MOCK=none umi dev",
    "build:devall": "cross-env PORT=3000 UMI_ENV=development MOCK=none umi build",
    "build:prodall": "cross-env PORT=3001 UMI_ENV=production MOCK=none umi build",
    "build:testall": "cross-env PORT=3002 UMI_ENV=test MOCK=none umi build"
  },

4.不同的环境运行不同的接口

# 开发环境
npm run start:devall

# 正式环境
npm run start:prodall

# 测试环境
npm run start:testall