架构和初始化

注意

本章主要是 config/config.ts 的配置

配置

alias

设置别名

import { defineConfig } from "umi";

export default defineConfig({
  // 配置别名
  alias: {
    "@assets": "/src/assets",
  },
});

base

要是部署在非根目录，需要设置 base

import { defineConfig } from "umi";

export default defineConfig({
  //非根目录配置 /xxx 要是根目录 就是/
  base: "/",
});

cssPublicPath

为 css 中的图片,文件指定自定义公共路径,默认是./

import { defineConfig } from "umi";

export default defineConfig({
  // 为 css 中的图片,文件指定自定义公共路径
  cssPublicPath: "./",
});

define (全局变量)

• 定义

import { defineConfig } from "umi";

export default defineConfig({
  define: {
    "process.env": {
      UMI_ENV: process.env.UMI_ENV,
      DOMAIN: "默认环境",
    },
  },
});

• 使用

<h2>
  Yay! Welcome to umi!-- {process.env.UMI_ENV}--{process.env.DOMAIN}{" "}
</h2>

favicons(网站图标)

• 相对路径

项目根目录 创建 public 文件夹里面放入 favicon.ico

favicons: ['/favicon.ico'],

• 绝对路径

favicons: ['https://www.dianyuan.com/statics/image/dianyuan.ico'],

• 综合

import { defineConfig } from "umi";

export default defineConfig({
  // 根目录下面新建public 文件夹,把 favicon.ico 放进去
  favicons: ["/favicon.ico"],
});

headScripts

配置在页面中插入的 script 标签。

import { defineConfig } from "umi";
export default defineConfig({
  // 配置 页面中使用的JS文件
  headScripts: ["http://libs.baidu.com/jquery/2.1.4/jquery.min.js"],
});

links

headers 中插入 links

项目根目录 创建 public 文件夹里面放入 common.css文件

• 相对路径

import { defineConfig } from "umi";

export default defineConfig({
  // 配置 页面中使用的CSS文件
  links: [{ href: "/common.css", type: "text/css", rel: "stylesheet" }],
});

• 绝对路径

  // 配置 页面中使用的CSS文件
  links: [
    { href: '/common.css', type: 'text/css', rel: 'stylesheet' },
    { href: 'https://www.dianyuan.com/statics/css/reset.css', type: 'text/css', rel: 'stylesheet' },
  ],

• 全部路径

import { defineConfig } from "umi";

export default defineConfig({
  // 配置 页面中使用的CSS文件
  links: [
    { href: "/common.css", type: "text/css", rel: "stylesheet" },
    {
      href: "https://www.dianyuan.com/statics/css/reset.css",
      type: "text/css",
      rel: "stylesheet",
    },
  ],
});

metas(TDK)

• 设置 tdk

import { defineConfig } from "umi";

export default defineConfig({
  // 配置tdk
  metas: [
    { name: "keywords", content: "umi, umijs" },
    {
      name: "description",
      content: "Ant Design Pro is a react-based project development framework.",
    },
  ],
  title: "测试标题",
});

routes 路由 (重点)

/*
 * @Author: jsopy
 * @Date: 2025-08-25 09:18:02
 * @LastEditTime: 2025-08-25 11:34:09
 * @FilePath: /ShiZhanJiaGou/config/config.ts
 * @Description:
 *
 */
import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: "pnpm",
});

最常用的配置

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  define: {
    "process.env": {
      UMI_ENV: process.env.UMI_ENV,
      DOMAIN: "默认环境",
    },
  },
  npmClient: "pnpm",
  // 配置别名
  alias: {
    "@assets": "/src/assets",
  },
  // 非根目录配置 /xxx 要是根目录 就是/
  base: "/",
  // 为 css 中的图片,文件指定自定义公共路径
  cssPublicPath: "./",
  // 根目录下面新建public 文件夹,把 favicon.ico 放进去
  favicons: ["/favicon.ico"],
  // 配置 页面中使用的JS文件
  headScripts: ["http://libs.baidu.com/jquery/2.1.4/jquery.min.js"],
  // 配置 页面中使用的CSS文件
  links: [
    { href: "/common.css", type: "text/css", rel: "stylesheet" },
    {
      href: "https://www.dianyuan.com/statics/css/reset.css",
      type: "text/css",
      rel: "stylesheet",
    },
  ],
  // 配置tdk
  metas: [
    { name: "keywords", content: "umi, umijs" },
    {
      name: "description",
      content: "Ant Design Pro is a react-based project development framework.",
    },
  ],
  title: "测试标题",
});