Umi知识点

1、Umi base

在UmiJS中，配置base参数的作用是设置应用的基础URL路径，这主要影响到路由的解析和静态资源的引用。当你需要将应用部署到服务器的一个子路径下，而不是根目录时，就需要配置base。例如，如果你的应用部署在http://example.com/bbbb/下，那么配置base: '/bbbb/'是必要的。

配置base的影响包括：

1. 路由：所有基于Umi的路由将会相对于这个基础路径。这意味着，如果有一个路由/home，实际的URL将会是/bbbb/home。

2. 静态资源：应用中引用的静态资源（如CSS、JavaScript文件等）的路径也需要相应调整。配置publicPath通常与base相同，确保Webpack在打包时为这些静态资源的引用添加正确的前缀，否则它们可能无法正确加载。

3. HTML文件：index.html文件中的<base>标签会被设置为base的值，这影响了页面内链接和图片等资源的相对路径解析。

4. API请求：如果使用了Umi的umi-request或者其他基于URL的API请求库，可能需要根据base调整请求的URL前缀。

5. 其他引用：任何在HTML或者JavaScript中硬编码的URL也需要考虑base的设置，确保它们能够正确指向。

例如，以下配置会将应用部署到/bbbb/路径下，并确保所有资源和路由都能正确工作：

export default {
  base: '/bbbb/',
  publicPath: '/bbbb/', // 与base相同，确保静态资源路径正确
};

请注意，publicPath在某些情况下可能需要配置为绝对URL，特别是在使用CDN时。

例如配置只配置

base: '/bbbb/',

那么路由本来是http://localhost:8001/demo，就变成了http://localhost:8001/bbbb/demo 。

2、Umi中process.env失效

umi版本: "^3.5.0"

//package.json

"start:dev": "cross-env DEMO=demo MOCK=none UMI_ENV=dev umi dev",


//config.dev.ts

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    'process.env.UMI_ENV': 'test',
    API_HOST: 'https://demo/aaa',
  },
  publicPath:process.env.DEMO=== 'demo' ? '/' : '//haha/bbb/',
  base: process.env.DEMO=== 'demo' ? '/' : '/bbb/',
});

自己debug运行可以正常拿到process.env.DEMO，但是使用npm run  start:dev，那么process.env.DEMO值就是空值。

解决：

config.ts配置里面增加

export default defineConfig({
  define: {
    'process.env': process.env,
  },
});