umi 常用配置
这是我参与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的配置。
以上是常用的一些配置，其他的配置可以自行学习 ✈️