简介
- 配置文件允许在
.umirc.js
或config/config.js
(二选一,.umirc.js
优先)中进行配置
// config/config.js示例
export default {
base: '/web/', //部署到非根目录时才需配置
targets: { //配置浏览器最低版本,比如兼容ie11
ie: 11
},
hash: true, //开启打包文件的hash值后缀
treeShaking: true, //去除那些引用的但却没有使用的代码
plugins: [
[
'umi-plugin-react',
{
antd: true, //启用后自动配置 babel-plugin-import,实现antd按需加载
dynamicImport: { //实现路由级的动态加载
webpackChunkName: true //实现有意义的异步文件名
},
dva: {
dynamicImport: true, //是否启用按需加载
hmr: true //是否启用 dva 的 热更新
},
//通过 webpack 的 dll 插件预打包一份 dll 文件来达到二次启动提速的目的
dll: {
exclude: [],
include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es']
},
//约定式路由时才需引用,用于忽略指定文件夹中自动生成的路由
routes: {
exclude: [
/components\//,
/model\.(j|t)sx?$/,
/components\.(j|t)sx?$/,
/service\.(j|t)sx?$/,
/models\//,
/services\//
],
},
}
]
],
//配置式路由时,路由文件由此引用(往下会讲到)
routes: routes,
//代理请求
proxy: {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},
alias: {'@': resolve(__dirname, '../src'),} //别名,umirc.js为'src'
};
- 可以通过环境变量
UMI_ENV
区分不同环境来指定配置。
配置多环境
-
安装
cross-env
:npm i cross-env --save-dev
-
添加
config/config.dev.js
文件
export default {
define: {
"process.env.apiUrl":'https://www.dev.com/'
}
}
- 添加
config/config.sit.js
文件
export default {
define: {
"process.env.apiUrl":'https://www.sit.com/'
}
}
- 添加
config/config.prod.js
文件
export default {
define: {
"process.env.apiUrl":'https://www.prod.com/'
}
}
- 修改
package.json
文件
{
// ...
"scripts": {
// ...
"build:sit": "cross-env UMI_ENV=sit umi build",
"build:prod": "cross-env UMI_ENV=prod umi build",
"dev": "cross-env UMI_ENV=dev npm run start:dev",
// ...
}
// ...
}
- 在页面中使用
console.log(process.env.apiUrl);
启用Hash路由
umi
默认是用的Browser History
,如果要用Hash History
,配置一下即可
export default {
history: 'hash',
}
scroll to top
在layout
组件(layouts/index.js
或者pages
子目录下的_layout.js
)的componentDidUpdate
里决定是否scroll to top
import React, { Component } from 'react';
import withRouter from 'umi/withRouter';
class Layout extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export default withRouter(Layout);
token验证
比如登录流程,登录后返回一个token
- 在
mock/
目录下新建login.js
文件
export default {
"post /api/login": function(req, res) {
const { username, password } = req.body
if (username==="wmm" && password==="wmm66") {
return res.json({ code: 200, data: { token: "xxxxxxx", name: "wmm" }})
}
return res.json({ code: 302, info: "登录失败" })
}
}
- 在
src/services/
目录下新建login.js
文件
import axios from 'axios'
export function login(data) {
return axios.post('/api/login', data)
}
- 在
src/models/
目录下新建login.js
文件
import router from 'umi/router'
import { login } from '../services/login'
// 初始的state
const initUserInfo = {
token: '',
name: ''
}
export default {
namespace: 'login',
state: initUserInfo,
reducers: {
init(state, action) {
return action.payload
}
},
effects: {
*login(action, { call, put }) {
// 发起请求
const res = yield call(login, action.payload)
// 登录成功
if (res.data.code === 200) {
// 派发异步action
yield put({ type: 'init', payload: res.data.data })
// 登录成功,跳转到首页
router.push('/')
} else {
console.log('登录失败')
}
}
}
}
- 在
src/pages/
目录下新建login.jsx
文件
import React, { Component } from 'react'
import { connect } from 'dva'
@connect()
class Login extends Component {
onSubmit() {
// 派发action,发起请求
this.props.dispatch({
type: 'login/login',
payload: { username: 'wmm', password: 'wmm66' }
})
}
render() {
return (
<div>
<button onClick={this.onSubmit}>登录</button>
</div>
)
}
}
-
在根目录下新建
routes/
目录 -
在
routes/
目录下新建PrivateRoute.js
文件
import React, { Component } from 'react'
import Redirect from 'umi/redirect'
import { connect } from 'dva'
@connect(state => ({ token: state.login.token }))
class PrivateRoute extends Component {
render() {
if (this.props.token) {
// 登录成功时,显示子路由的页面组件
return <div>{this.props.children}</div>
}
// 没有登录时,重定向到登录页
return <Redirect to="/login">
}
}
- 修改路由配置,给需要登录的页面添加上
Routes: ['../routes/PrivateRoute.js']
发表评论