开发中遇到的问题，已经处理的，在这里记录一下。给朋友们一个参考 #246

xiaohuoni · 2018-03-22T08:29:22Z

现在文档比较少，好几个朋友都遇到一样的问题，在这里记录一下。大家还有遇到什么问题，可以在这里补充，我会尽量帮忙搞到解决方案

xiaohuoni · 2018-03-22T08:31:36Z

在ejs里面增加viewport会导致hd方案失效

注意initial-scale=1 会导致失效，可以使用以下的mate

<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

xiaohuoni · 2018-03-22T08:33:45Z

局部覆盖antd 样式

.wrapper {
    height: 500px;
     :global {
        .am-button-text {
            padding: 6px;
        }
    }
}

xiaohuoni · 2018-03-22T08:35:06Z

使用浏览器返回，页面没有刷新

layouts/index.js 里用 withRouter 包以下。参考 https://github.com/umijs/umi-dva-user-dashboard/blob/master/src/layouts/index.js

xiaohuoni · 2018-03-22T08:37:26Z

使用withRouter和connect包裹Layout错误

export default withRouter(connect(({}) => ({}))(Layout))

注意先后顺序

xiaohuoni · 2018-03-22T08:38:35Z

build 后访问路由刷新后 404？

几个方案供选择：

* 改用 hashHistory，在 `.umirc.js` 里配 `hashHistory: true`
* 静态化，在 `.umirc.js` 里配 `exportStatic: true`
* 服务端配置路由 fallback 到 index.html

xiaohuoni · 2018-03-22T08:40:50Z

build的时候，图片路径报错

在webpackrc中配置publicPath:"/static/",

xiaohuoni · 2018-03-22T09:03:48Z

.umirc.mock.js

简单用法

export default {
  '/api/hello'(req, res) {
    res.end(`hello ${Math.random()}`);
  },
  ...require('./mock/user'),
};

可以用下面的方法，写到别的文件里面去。

const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
	Object.assign(mock, require('./mock/' + file))
})
module.exports = mock

xiaohuoni · 2018-03-22T09:06:59Z

document.ejs

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title></title>
</head>
<style>
    body{
        user-select:none;
    }
</style>
<body >

<div id="root"></div>
</body>

</html>

配置模板[https://umijs.org/docs/zh-Hans/html-tpl.html](配置 HTML 模板)

xiaohuoni · 2018-03-22T09:09:21Z

动态修改title

import { Helmet } from 'react-helmet';

<Helmet>
        <title>UMI DEMO</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href={xxx} type="image/x-icon" />
        <script src={xxx} />
        <link rel="stylesheet" href={xxx} />
      </Helmet>

在混合应用中，iOS修改不了。可以使用react-document-title

xiaohuoni · 2018-03-22T09:11:39Z

如何引入 polyfill？

先安装依赖，

$ npm install @babel/polyfill --save

新建 src/global.js，内容如下：

import '@babel/polyfill';

推荐使用umi-plugin-polyfill

xiaohuoni · 2018-03-22T09:34:59Z

build 后，打开只有标题，页面空白

页面需要部署
最简单的方式是
$npm i serve -g
在dist目录下
$ serve

xiaohuoni · 2018-03-23T03:07:06Z

this.setDynamic is not a function

将旧的roadhog或者dva项目，转移到umi时
如果有babel-runtime依赖和配置了babel-plugin-transform-runtime插件，需删除，因为已内置处理，

xiaohuoni · 2018-03-30T09:42:23Z

在request.js文件里有办法做路由跳转吗

路由跳转用这个
import router from 'umi/router';
router.push('/login')
抛事件用window.g_app._store.dispatch

xiaohuoni · 2018-04-05T08:06:57Z

在gobal.less中覆盖ant的样式

在开发环境下，有效。
build之后，发现ant的样式会覆盖写在gobal.less中的样式

暂时的处理是给样式强制 ！important

xiaohuoni · 2018-04-06T06:31:47Z

有些页面不使用公共的Layout

config.js

const openPages: ['/login','/plan','/home',"/"];
module.exports = {
    openPages:openPages
}

layouts/index.js

import config  from "config.js";
const { openPages } = config;
if (openPages && openPages.includes(pathname)) {
    return (
      <div>
        {children}
      </div>
    );
  }else{
//something
}

xiaohuoni · 2018-04-06T06:35:05Z

锚点和hashHistory冲突

import { HashLink } from "react-router-hash-link";
const router ="main";//当前的路由，重复跳转到当前路由不会触发页面更新
const anchorHref="#api";//这个是定位的锚点 如<div id="api"></div>
<HashLink to={`/${router}${anchorHref}`}>点击跳转</HashLink>

上述方法不好用，涉及到路由携带参数，会有问题。
使用下面方法

 handleQuickJump(id, e) {
    if (e) {
      e.preventDefault();
    }
    const node = document.querySelector(id);
    if (node) {
      node.scrollIntoView(true);
    }
  }

xiaohuoni · 2018-04-23T03:04:23Z

多层嵌套的State

习惯使用VUE的朋友（或其他别的框架使用者），对嵌套的state使用不习惯的。
方法1：使用Umi

export default {
  plugins: [
    ['umi-plugin-dva', { immer: true }],
  ],
};

方法2：自己写的react组件

$ npm install immer --save

import produce from "immer"
/**
 * Classic React.setState with a deep merge
 */
onBirthDayClick1 = () => {
    this.setState((prevState)=>({
        user: {
            ...prevState.user,
            age: prevState.user.age + 1
        }
    }))
}

/**
 * ...But, since setState accepts functions,
 * we can just create a curried producer and further simplify!
*/
onBirthDayClick2 = () => {
    this.setState(produce(draft => {
        draft.user.age += 1
    }))
}

用的组件都是immer

xiaohuoni · 2018-04-26T17:27:52Z

umi-antd-pro，现在的都是在antd-design-pro的基础上修改的，觉得有点乱，保留antd-design-pro的组件和页面逻辑，一点点整理的。地址：https://github.com/xiaohuoni/umi-antd-pro

xiaohuoni · 2018-05-10T07:26:11Z

脚手架

官方

umi-dva-user-dashboardUser dashboard example with combination use of umi and dva.
umi-antd-admin A admin dashboard application demo built upon Ant Design and Umi
with-dva umi with dva
with-dva-and-immer umi with dva and immer
umi-examples umi examples

非官方

umi-antd-pro umi-antd-pro，所有的组件和页面逻辑保留 Ant Design Pro的设计。
dva-umi a scaffolding for dva-umi (已在项目中使用)
dva-umi-mobile a scaffolding for dva-umi-mobile (已在项目中使用)
umi-pro 基于umi, 大部分代码重用 ant design pro 使用react-intl支持多语言 (已在项目中使用)

xiaohuoni · 2018-05-10T14:40:48Z

切换默认的'Compiling'

@sorrycc 你觉得怎么处理这个问题比较好哦？
1、在umirc.js中增加配置
2、增加一个Compiling.js返回一个react dom。目录层级和dva.js一起
我比较想用第二种方法，不知道还有没有别的方案

chenfengyanyu · 2018-05-17T06:18:47Z

@xiaohuoni 很赞，这里面提到的问题，开发过程有很多都碰到过。

xiaohuoni · 2018-05-17T07:31:17Z

@chenfengyanyu 欢迎补充，后续让大佬把这里整理一下，可以放到FAQ里面。

chenfengyanyu · 2018-05-18T06:59:32Z

@xiaohuoni 有遇到环境变量的问题嘛，我有几套环境，需要不同的API地址：

"release": "cross-env NODE_ENV=production umi build",
"dev": "cross-env NODE_ENV=development umi build",

像上面这样，只要我一运行 npm run dev，NODE_ENV 就会变成 production ，所以区分不了环境。不知道你是如何处理的？

xiaohuoni · 2018-05-31T08:27:04Z

如何在项目中使用图片

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

.Logo {
  background-image: url(./logo.png);
}

daqi · 2018-06-06T05:57:19Z

@chenfengyanyu 我自己定义了一个环境变量SERVER=PROD SERVER=TEST

chenfengyanyu · 2018-06-06T06:10:10Z

@daqi 谢谢啦，我也是换了环境变量

awexianshen · 2018-06-06T08:53:38Z

@xiaohuoni 大佬你好,请问一下,引入了@babel/polyfill之后会在Dvacontainer文件里报错,引入了umi-plugin-polyfill会报错缺少')',这个怎么才能解决

axu6705 · 2018-06-06T09:48:29Z

@daqi 可以分享下怎么配置的吗~谢谢！

daqi · 2018-06-06T11:05:43Z

@axu6705

配置

package.json里面大概是这样

{
"scripts": {
    "start": "SERVER=dev umi dev",
    "build": "SERVER=prod umi build",
    "build:test": "SERVER=test umi build",
    "upload": "export SERVER=prod && node upload.js",
    "upload:test": "export SERVER=test && node upload.js"
  },
...
}

使用

config/index.js

let config = require('./'+process.env.SERVER+'.js')

module.exports = config

.webpackrc.js

const publicPath =
  process.env.SERVER === 'prod'
    ? 'http://img0.abc.com/abc-h5/'
    : process.env.SERVER === 'test' ? 'http://static.abc.com/abc-h5/' : '/static/'

export default {
  publicPath: publicPath
}

sorrycc · 2018-06-07T10:10:35Z

常见 FAQ 在 https://umijs.org/guide/faq.html 继续维护，可以提 PR 到这里。

wangxingkang · 2018-08-06T06:04:13Z

@xiaohuoni 关于项目图标 https://juejin.im/post/59bb864b5188257e7a427c09 作者提供的方案感觉比较优雅，可否提供一个配置方案

wangxingkang · 2018-08-07T04:45:16Z

参考 https://github.com/zuiidea/antd-admin 并做一些优化

具体步骤如下

1、 .webpackrc.js 作如下配置

urlLoaderExcludes: [
    path.join(__dirname, 'src/icons')
]

2、添加 webpack.config.js 文件(需添加svg-sprite-loader依赖)

const path = require('path');

export default function (webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.svg$/i,
    include: [path.join(__dirname, 'src/icons')],
    use: [
      {
        loader: require.resolve('svg-sprite-loader')
      }
    ]
  });

  return webpackConfig
};

3、添加svg文件

请在src/icons/svg 目录下添加svg文件

4、新建src/icons/index.js

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./svg', false, /\.svg$/);
requireAll(req);

5、在global.js 引入

import './icons/index';

6、新建SvgIcon组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import styles from './index.less';

class Index extends Component {
  static propTypes = {
    className: PropTypes.string,
    icon: PropTypes.string
  };

  static defaultProps = {
    className: '',
    icon: ''
  };

  render() {
    const { className, icon } = this.props;
    const clsString = ClassNames(className, styles.main);

    return (
      <svg className={clsString} aria-hidden="true">
        <use xlinkHref={`#${icon}`} />
      </svg>
    )
  }
}

export default Index;

JohnNiang · 2018-09-20T07:08:22Z

@chenfengyanyu 我自己定义了一个环境变量SERVER=PROD SERVER=TEST

是如何做到自己定义环境变量的呢？我自己定义过后，但是无法获取变量，无论如何都是undefined

xiaohuoni · 2018-09-20T07:56:46Z

@wangxingkang 感谢分享，今天才看到你的这个回复。

toobeloong · 2018-12-03T12:03:20Z

请问有遇到过在layout中使用cloneelement给children传递方法，children获取undefined么

devmsg · 2019-01-04T01:39:54Z

请问有遇到过在layout中使用cloneelement给children传递方法，children获取undefined么

提供一下你的使用规则呗这种问题一般都是react用法问题哦

superchenwb · 2019-02-20T03:12:03Z

@freedomljt 在umi中，layout的children并不是你的page，而是路由，所以你传递的属性并没有加入到你的页面中，你可以打印一下layout的children看看

xiaohuoni · 2019-02-22T01:14:13Z

这个太长了，打开浪费太多时间。有问题重发iss吧

sorrycc added the type(documentation) label Mar 22, 2018

xiaohuoni mentioned this issue May 18, 2018

为什么刷新页面后变成 404？ #186

Closed

sorrycc closed this as completed Jun 7, 2018

huangshunping mentioned this issue Jul 30, 2018

如何配置mock #332

Closed

superlbr mentioned this issue Aug 21, 2018

关于Iconfont zuiidea/antd-admin#270

Closed

devmsg mentioned this issue Sep 27, 2018

2.0.3版本所面临的问题 #1146

Closed

xiaohuoni mentioned this issue Nov 6, 2018

关于使用 spring boot部署的问题 ant-design/ant-design-pro#2709

Closed

umijs locked and limited conversation to collaborators Feb 22, 2019

开发中遇到的问题，已经处理的，在这里记录一下。给朋友们一个参考 #246

开发中遇到的问题，已经处理的，在这里记录一下。给朋友们一个参考 #246

Comments

xiaohuoni commented Mar 22, 2018 • edited Loading

xiaohuoni commented Mar 22, 2018 • edited Loading

在ejs里面增加viewport会导致hd方案失效

xiaohuoni commented Mar 22, 2018 • edited Loading

局部覆盖antd 样式

xiaohuoni commented Mar 22, 2018

使用浏览器返回，页面没有刷新

xiaohuoni commented Mar 22, 2018

使用withRouter和connect包裹Layout错误

xiaohuoni commented Mar 22, 2018 • edited Loading

build 后访问路由刷新后 404？

xiaohuoni commented Mar 22, 2018

build的时候，图片路径报错

xiaohuoni commented Mar 22, 2018

.umirc.mock.js

xiaohuoni commented Mar 22, 2018

document.ejs

xiaohuoni commented Mar 22, 2018 • edited Loading

动态修改title

xiaohuoni commented Mar 22, 2018 • edited Loading

如何引入 polyfill？

xiaohuoni commented Mar 22, 2018

build 后，打开只有标题 ，页面空白

xiaohuoni commented Mar 23, 2018 • edited Loading

this.setDynamic is not a function

xiaohuoni commented Mar 30, 2018

在request.js文件里有办法做路由跳转吗

xiaohuoni commented Apr 5, 2018

在gobal.less中覆盖ant的样式

xiaohuoni commented Apr 6, 2018

有些页面不使用公共的Layout

xiaohuoni commented Apr 6, 2018 • edited Loading

锚点 和hashHistory冲突

xiaohuoni commented Apr 23, 2018

多层嵌套的State

xiaohuoni commented Apr 26, 2018

xiaohuoni commented May 10, 2018 • edited Loading

脚手架

官方

非官方

xiaohuoni commented May 10, 2018 • edited Loading

切换默认的'Compiling'

chenfengyanyu commented May 17, 2018

xiaohuoni commented May 17, 2018

chenfengyanyu commented May 18, 2018

xiaohuoni commented May 31, 2018

如何在项目中使用图片

daqi commented Jun 6, 2018

chenfengyanyu commented Jun 6, 2018

awexianshen commented Jun 6, 2018

axu6705 commented Jun 6, 2018

daqi commented Jun 6, 2018

配置

使用

sorrycc commented Jun 7, 2018

wangxingkang commented Aug 6, 2018

wangxingkang commented Aug 7, 2018

JohnNiang commented Sep 20, 2018

xiaohuoni commented Sep 20, 2018

toobeloong commented Dec 3, 2018

devmsg commented Jan 4, 2019

superchenwb commented Feb 20, 2019

xiaohuoni commented Feb 22, 2019

xiaohuoni commented Mar 22, 2018 •

edited

Loading

xiaohuoni commented Mar 22, 2018 •

edited

Loading

xiaohuoni commented Mar 22, 2018 •

edited

Loading

xiaohuoni commented Mar 22, 2018 •

edited

Loading

xiaohuoni commented Mar 22, 2018 •

edited

Loading

xiaohuoni commented Mar 22, 2018 •

edited

Loading

build 后，打开只有标题，页面空白

xiaohuoni commented Mar 23, 2018 •

edited

Loading

xiaohuoni commented Apr 6, 2018 •

edited

Loading

锚点和hashHistory冲突

xiaohuoni commented May 10, 2018 •

edited

Loading

xiaohuoni commented May 10, 2018 •

edited

Loading