jinjinwa / umi-antd-mobile Goto Github PK

项目打包生成的静态文件下的index.html直接在本地浏览器打开访问是空的 请问这是什么原因啊

求教：项目中是通过什么组件将Less中的px自动转成rem的啊？

初入门react,到umi还能循序渐进,但是到了这个demo, 顿时头大.

1. 依赖库的多个单元测试和校验了解了.
2. config.js的复杂用法,也看到了.

问题?

1. deploy这个就太难懂了,为什么要这样做? 没有明白什么意思,达到什么目的.
2. 按umi教程, 本地执行 serve ./deploy/dist 本地验证时,出现的是404错误. 咋个解决?

less改变，页面未发生任何变化，需要手动刷新才可以。

antd-mobile标签页官方示例是这样的：

在src/pages/index/index.js文件中测试，把antd-mobile的标签页放到页面中，显示结果是这样的：
https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-mutlitabs

上面的那个切换tabs不显示，是哪里没写对？代码如下：

import React, { PureComponent } from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';


class Index extends PureComponent {
  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);

  render() {
    const tabs = [
      { title: '1st Tab' },
      { title: '2nd Tab' },
      { title: '3rd Tab' },
      { title: '4th Tab' },
      { title: '5th Tab' },
      { title: '6th Tab' },
      { title: '7th Tab' },
      { title: '8th Tab' },
      { title: '9th Tab' },
    ];

    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
          {this.renderContent}
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }

}

export default Index;

本地开发时将https://hmj.jahwaec.com修改localhost:8099返回请求都是html页面，即使在mock文件下创建mock文件也不行。

currHref 写错了 位置。
每次判断都是不同的。

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    let currHref = '';
    const { href } = window.location; // 浏览器地址栏中地址
    if (currHref !== href) {
      // currHref 和 href 不一致时说明进行了页面跳转
      NProgress.start(); // 页面开始加载时调用 start 方法
      if (!loading.global) {
        // loading.global 为 false 时表示加载完毕
        NProgress.done(); // 页面请求完毕时调用 done 方法
        currHref = href; // 将新页面的 href 值赋值给 currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: 'hidden' }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

应该为

let currHref = '';

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    
    const { href } = window.location; // 浏览器地址栏中地址
    if (currHref !== href) {
      // currHref 和 href 不一致时说明进行了页面跳转
      NProgress.start(); // 页面开始加载时调用 start 方法
      if (!loading.global) {
        // loading.global 为 false 时表示加载完毕
        NProgress.done(); // 页面请求完毕时调用 done 方法
        currHref = href; // 将新页面的 href 值赋值给 currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: 'hidden' }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

在less文件中都是用px写的, 在浏览器中发现都自动转成了rem格式, 请问这一步是有特殊处理吗?

手机：摩托罗拉
系统：4.0.4
浏览器：自带浏览器

表现：
输入地址，白屏，但是Pro的标题图标出来了；
ps：我已经把umi的targets改成andriod：4了

我在开发模式不出现错误 以但打包发布就报错，感觉是webpack build 配置有问题，求解决！
错误如下：
umi build

Build completed in 42.202s

ERROR Failed to compile with 1 errors 3:47:22 PM
error in ./src/pages/index/index.less

Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'images/bg.png' in 'D:\www\dtk_react_flow_www\wap\src\pages\index'
at factory.create (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\Compilation.js:888:10)
at factory (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:401:22)
at resolver (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:224:22)
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:2830:7
at D:\www\dtk_react_flow_www\wap\node_modules_neo-async@2.6.1@neo-async\async.js:6877:13
at normalResolver.resolve (D:\www\dtk_react_flow_www\wap\node_modules_webpack@4.38.0@webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :15:1)
at hook.callAsync (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\www\dtk_react_flow_www\wap\node_modules_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (D:\www\dtk_react_flow_www\wap\node_modules_enhanced-resolve@4.1.0@enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)

@ ./src/pages/index/index.js 38:36-59
@ ./src/pages/.umi-production/router.js
@ ./src/pages/.umi-production/umi.js
@ multi ./src/pages/.umi-production/umi.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: umi build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tql16\AppData\Roaming\npm-cache_logs\2019-08-05T07_47_22_305Z-debug.log

debug.log 内容：
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\www\dtk_react_flow_www\wap\node_modules.bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\personalcenter\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\backgroundtool\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\kissweather\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\QPlusRes\features\mirrorscreen\bin;C:\Users\tql16\AppData\Roaming\Tencent\QPlus\4.8.3071.0\Bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Docker\Docker\Resources\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files\Git\cmd;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Program Files\nodejs;C:\Users\tql16\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;"C:\Program Files\Java\jdk-11.0.1\bin; C:\Program Files\Java\jdk-11.0.1\jre\bin";;C:\Users\tql16\AppData\Local\Programs\Fiddler;C:\Users\tql16\AppData\Roaming\npm
9 verbose lifecycle [email protected]build: CWD: D:\www\dtk_react_flow_www\wap
10 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'umi build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]build: Failed to exec build script
13 verbose stack Error: [email protected] build: umi build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\www\dtk_react_flow_www\wap
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v10.16.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: umi build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

将define配置加入不生效， 相同的配置在antd-pro脚手架是生效的

"define": {
"process.env.TEST": 1,
"USE_COMMA": 2,
},