提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

umi 常用配置

2023-02-25 18:16:31 时间

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

配置文件

.umirc.ts

默认的配置文件，优先级比config/config.ts要高。适用于简单的配置。

config/config.ts

需要自己创建，如果项目复杂的话，把项目配置写到 config/config.ts 中 对配置进行拆分【比如路由配置】

hash

让生成的文件包含hash后缀，适用于增量发布和避免浏览器加缓存(短时间内发布多个版本，不发生变化)。 打包后的文件会增加哈希 如： umi.df723s.js

添加 hash:true

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  hash:true
});

再执行打包(因为此处用的包管理是yarn)

yarn bulid

可以发现 生成的dist打包文件夹下的文件都加上了生成的hash值。

base

路由前缀，默认是 / ，首先，你有两个路由 / 和 /user 如果设置了base为/foo/，那么就可以通过 /foo/ 和 /foo/user/访问到之前的两个路由。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  hash:true,
  base:'/foo/'
});

publicPath

打包后dist文件夹下的index.html中引用着 js和css 文件。常用于:

1.CDN

我们把这些引用的文件放到CDN上，那么引入文件的地址就需要加上CDN地址

<script src="http://www./umi.7d035d79.js"></script>

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="/umi.f3c25626.css" />
    <script>
      window.routerBase = "/";
    </script>
    <script>
      //! umi version: 3.5.20
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="/umi.7d035d79.js"></script>
  </body>
</html>

配置publicPath

在调试环境下最好注释掉 因为其会去这个地址下招静态文件，会一直出现空白页

[.umirc.ts]

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  hash:true,
  publicPath:'http://xxx.com/cdn/'
});

然后再执行 yarn build

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="http://xxx.com/cdn/umi.f3c25626.css" />
    <script>
      window.routerBase = "/";
    </script>
    <script>
      //! umi version: 3.5.20
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="http://xxx.com/cdn/umi.5f275c37.js"></script>
  </body>
</html>

2.资源在其他目录下

[.umirc.ts]

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  hash:true,
  publicPath:'/static/'
});

outputPath

指定打包输出路径，比如我们不想要 dist目录。(改成build目录)

outputPath:'/build'

title

改动页面标题

title:'UmiJs'

当我们不想每页都是一样的title时，我们可以在路由中配置。当我们在路由中没有配置title属性，才会使用全局默认的这个title配置的内容。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  title:'UmiJs',
  routes: [
    { path: '/', component: '@/pages/index' ,title:'首页'},
  ],
  fastRefresh: {},
  hash:true,
  publicPath:'http://xxx.com/cdn/'
  // base:'/admin/'
});

history

hash(会在路由后加#) 和 browser(默认)两种

history配置是一个对象，对象的type属性对应 hash、browser

   history:{
   type:'hash'
  },

target

也是一个对象，用于配置需要兼容浏览器的最低版本

  targets:{
    ie:11,
  }

proxy

为了解决跨域

  //  /api/student
  proxy: {
    '/api': {
      // 请求地址
      target: 'http://jsonplaceholder.typicode.com/',
      changeOrigin: true,
      // 将api替换成空
      pathRewrite: { '^/api': '' },
    },
  },

theme

其实是antdesign 使用的色调

 theme: {
    '@primary-color': '#1DA57A',
  },

routes

配置和react-router基本一致

chainWebpack

也很常用，用于去修改Webpack的配置。

以上是常用的一些配置，其他的配置可以自行学习 ✈️

相关文章