UmiJS常用配置

简介

• 配置文件允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置

// config/config.js示例
export default {
  base: '/web/',  //部署到非根目录时才需配置
  publicPath: '/web/', //部署到非根目录和base一起使用
  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’]