在开发完成之后，或者当我们需要线上环境时，我们就可以尝试着在本地部署。
    先执行 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 请求的部分。

    本地部署调试 - 图1

    使用 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 （你可以试试看哦）