UmiJS常用配置

简介

  • 配置文件允许在 .umirc.jsconfig/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-envnpm 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']

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: