本地部署调试

在开发完成之后，或者当我们需要线上环境时，我们就可以尝试着在本地部署。 先执行umi的编译标本

  1. $ npm run build
  3. > @ build /Users/xiaohuoni/Documents/GitHub/umi-course/hero
  4. > umi build
  6. [09:48:33] webpack compiled in 12s 48ms
  7.  DONE  Compiled successfully in 12057ms                                                                                            09:48:33
  9. File sizes after gzip:
  11.   320.5 KB  dist/umi.js
  12.   15.31 KB  dist/umi.css

然后，安装serve服务

  1. $ npm i serve -g
  2. or
  3. $ yarn global add serve

使用serve启动本地服务

  1. $ cd dist
  2. 注意要到dist的目录下执行
  3. $ serve
  4. UPDATE AVAILABLE The latest version of `serve` is 10.1.1
  6.    ┌─────────────────────────────────────────────────────┐
  7.    │                                                     │
  8.    │   Serving!                                          │
  9.    │                                                     │
  10.    │   - Local:            http://localhost:5000         │
  11.    │   - On Your Network:  http://192.168.199.195:5000   │
  12.    │                                                     │
  13.    │   Copied local address to clipboard!                │
  14.    │                                                     │
  15.    └─────────────────────────────────────────────────────┘

打开http://localhost:5000 切换到hero页面，发现由一堆错误。 仔细看是因为访问的接口404了，因为我们的服务数据都是来自与本地的mock服务。 我们可以在model里面做一点小的修改。比如

  1. + import herolistjson from '../../../../mock/herolist.json';
  3. effects: {
  4.     *fetch({ type, payload }, { put, call, select }) {
  5. +      const herolist = herolistjson;
  6. +      function getRandomArrayElements(arr, count) {
  7. +        var shuffled = arr.slice(0),
  8. +          i = arr.length,
  9. +          min = i - count,
  10. +          temp,
  11. +          index;
  12. +        while (i-- > min) {
  13. +          index = Math.floor((i + 1) * Math.random());
  14. +          temp = shuffled[index];
  15. +          shuffled[index] = shuffled[i];
  16. +          shuffled[i] = temp;
  17. +        }
  18. +        return shuffled.slice(min);
  19. +      }
  20. +      const freeheros = getRandomArrayElements(herolistjson, 13);
  21.       yield put({
  22.         type: 'save',
  23.         payload: {
  24.           heros: herolist,
  25.           freeheros: freeheros,
  26.         },
  27.       });
  28.     },
  29.   },

这里再强调一次，编译之后mock服务无效。 同样的item和summoner的model也做类似的修改，这里我们暂时去掉了http请求的部分。

2019-01-03 10.23.55.gif | center | 747x542

使用serve部署，支持本地访问和同一个局域网的设备访问。 同局域网的设备需要访问 On Your Network: http://192.168.199.195:5000

你可能需要，将页面发给外网用户使用，那你就可以选择安装now

  1. $ npm i now -g
  2. or
  3. $ yarn global add now

一样的执行完umi build之后，cd到dist，执行now

  1. $ now
  2. > UPDATE AVAILABLE The latest version of Now CLI is 12.1.14
  3. > Read more about how to update here: https://zeit.co/update-cli
  4. > Deploying ~/Documents/GitHub/umi-course/hero/dist under 448627663@qq.com
  5. > Synced 3 files (1.29MB) [4s]
  6. > https://dist-titatdengk.now.sh [in clipboard] [2s]
  7. > Deployment complete!

通过屏幕中打印的地址访问https://dist-titatdengk.now.sh （你可以试试看哦）