• 配置 config
  • 使用配置式路由抽离路由文件
  • tsconfig.json 开启装饰器语法

起步

  • npx @umijs/create-umi-app ( 墙裂推荐！！！)
  • yarn create @umijs/umi-app

安装依赖

  • cnpm （首选）
  • yarn

启动

npm run start

配置

  • .umirc
  • config/config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { defineConfig } from "umi";
import routes from "./routes";
import path from "path";

export default defineConfig({
  base: "/",
  //生成hash文件名
  hash: true,
  //hash路由
  history: {
    type: "browser",
  },
  // 暂时关闭
  pwa: false,
  dva: {
    immer: true, // 表示是否启用 immer 以方便修改 reducer
    hmr: true, // 表示是否启用 dva model 的热更新
  },
  // sass配置
  nodeModulesTransform: {
    type: "none",
  },
  // 路由配置
  routes,
  //快速刷新
  fastRefresh: {},
  // 别名配置
  alias: {
    "@": path.join(process.cwd(), "src"),
  },
  // 代理配置(跨域处理) http://10.98.98.142:8080/
  proxy: {
    "/api": {
      target: "http://127.0.0.1:7001",
      changeOrigin: true,
      pathRewrite: { "^/api": "" },
    },
  },
});

config/routes.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default [
  {
    path: "/",
    // 项目页面的入口文件
    component: "@/components/layout/index",
    // 路由权限
    // hoc 高阶组件的路径
    wrappers: ["@/hoc/oauth"],
    routes: [
      {
        path: "/",
        redirect: "/home",
        exact: true,
      },
      { path: "/home", title: "主页", component: "@/pages/home" },
    ],
  },
];