UmiJS踩坑笔记

本文最后更新于：2 年前

UmiJS 踩坑笔记

UmiJS官方网站

UmiJS 快速上手

UmiJS快速上手1.png

官方未介绍目录结构

官方未介绍的目录结构.png

常用配置

常用配置.png

第一坑:

问题场景

使用 @umijs/umi-app 为模板，创建一个项目：

1
yarn create @umijs/umi-app

创建失败，报如下错误：

yarn create @umijs/umi-app 报错：文件名、目录名或卷标语法不正确。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
think@think-PC MINGW64 /e/zny-projects/demo01-umi
$ yarn create @umijs/umi-app
yarn create v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@umijs/create-umi-app > @umijs/utils > @babel/register@7.8.6" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] Building fresh packages...
success Installed "@umijs/create-umi-app@3.0.12" with binaries:
      - create-umi-app
文件名、目录名或卷标语法不正确。
error Command failed.
Exit code: 1
Command: D:\Develop\nodejs\node_global\bin\create-umi-app
Arguments:
Directory: E:\zny-projects\demo01-umi
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

解决：参考 https://github.com/yaoningvital/blog/issues/207

1、我是用 npm 安装的 yarn ：

npm i yarn tyarn -g

2、我重新设定了 npm 全局包的安装位置 和 缓存位置。

1
2
3
4
// 查看 npm 全局包的安装位置
npm config get prefix    // D:\Develop\nodejs\node_global
// 查看 npm 缓存位置
npm config get cache   // D:\Develop\nodejs\node_cache

3、查看 yarn 命令的目录：

1
2
yarn global bin
// D:\Develop\nodejs\node_global\bin

4、将获取到的 yarn 命令的目录配置到环境变量 Path 上。


到这一步之后，我再尝试执行命令yarn create @umijs/umi-app，问题并没有解决，还是报同样的错误。

5、查看 yarn 的全局安装位置：

1
2
yarn global bin
// D:\Develop\nodejs\node_global\bin


可以发现，yarn 的全局安装位置 和 bin 的位置不一致。

6、修改 yarn 的全局安装位置

将 yarn 的全局安装位置 修改为和 npm 的一致。
因为我的 npm 的位置是 “D:\Develop\nodejs”，那么我在 “D:\Develop” 下创建一个 yarn 文件夹，在 yarn 文件夹下再创建一个 global 文件夹和一个 cache 文件夹。
然后执行下面的命令，来设置 yarn 的全局安装位置和 缓存位置：

1
2
yarn config set global-folder "D:\Develop\yarn\global"
yarn config set cache-folder "D:\Develop\yarn\cache"

7、再查看 yarn 的全局安装位置 和缓存位置

1
2
3
4
5
6
$ yarn global dir
// D:\Develop\yarn\global


$ yarn cache dir
// D:\Develop\yarn\cache\v6

说明上一步的修改操作成功。

8、再执行 yarn create @umijs/umi-app

再执行 ：
yarn create @umijs/umi-app
操作成功：

第二坑：

在yarn build打包好，准备在serve服务器上本地验证

umi 官方文档显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
本地验证
发布之前，可以通过 serve 做本地验证，


$ yarn global add serve
$ serve ./dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.12.34:5000    │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

结果在 vscode 下报错

1
2
3
4
5
6
7
8
PS E:\前端自学\react1\融职商场后台管理\umijs\myapp> serve --version
serve : 无法将“serve”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，
如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ serve --version
+ ~~~~~
    + CategoryInfo          : ObjectNotFound: (serve:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决：最后在改在 CMD 命令行里执行成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Microsoft Windows [版本 10.0.19041.685]
(c) 2020 Microsoft Corporation. 保留所有权利。

E:\前端自学\react1\融职商场后台管理\umijs\myapp>serve ./dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.43.198:5000   │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

第三坑：

配置publicPath、outputPath

1
2
publicPath:'https://xxx.com/cdn/',
outputPath:'build',

publicPath:暂时无效果
outputPath:未新建并打包到build

解决：重新启动项目，需要多试几次publicPath、outputPath，

第四坑：

使用dva插件时，执行命令umi dva list model时：

umi : 无法将“umi”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

1
2
3
4
5
umi : 无法将“umi”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
+ umi dva list model
+ ~~~
    + CategoryInfo          : ObjectNotFound: (umi:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

解决：umi dva list model命令前加上yarn，

使用npm也不行。
执行结果如下：
yarn umi dva list model 

1
2
3
4
5
6
7
8
9
yarn run v1.22.5
$ E:\umijs\myapp\node_modules\.bin\umi dva list model

  Models in your project:


  Totally 0.

Done in 0.92s.

umijsDemo https://github.com/13982720426/UmiJS-Learning-record.git

第五坑：

使用 umi-ui 时配置 UMI_UI=1 umi dev

在 umi_ui\package.json 中配置了

1
"start:umi-ui": "UMI_UI=1 umi dev",

但是使用yarn start:umi-ui启动时 ‘UMI_UI’ 不是内部或外部命令，也不是可运行的程序

1
2
3
4
5
6
yarn run v1.22.5
$ UMI_UI=1 umi dev
'UMI_UI' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决：最后直接使用yarn start命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
yarn run v1.22.5
$ umi dev
🚀 Starting Umi UI using umi@3.4.14...
🌈 Umi UI mini Ready on port 3000.
Starting the development server...

√ Webpack
  Compiled successfully in 4.46s

 DONE  Compiled successfully in 4461ms                                                                                                            下午9:00:37

  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.43.198:8000
 WAIT  Compiling...                                                                                                                               下午9:00:37

√ Webpack
  Compiled successfully in 252.95ms

 DONE  Compiled successfully in 253ms

打开浏览器结果成功了
浏览器运行成功.png

点击右下角悬浮球，就出现了控制台
打开umi-ui控制台.png

umi-uiDome https://github.com/13982720426/umi-ui.git

第六坑：

antd pro 结合 uimjs 使用，安装工作台模板时报错

image.png
终端显示Execute task error Error: Error: Command failed: npm install -d bizcharts@^3.5.3-beta.0 prop-types@^15.5.10 --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org) --save
安装失败

1
2
3
4
Bundle with webpack 5...
Execute task error Error: Error: Command failed: npm install -d bizcharts@^3.5.3-beta.0 prop-types@^15.5.10 --registry=https://registry.npm.taobao.org --save
undefined
undefined

解决：在终端使用 cnpm 手动安装

cnpm install -d bizcharts@^3.5.3-beta.0 prop-types@^15.5.10 --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org) --save
安装成功

1
2
3
4
5
6
[1/2] prop-types@^15.5.10 installed at node_modules\_prop-types@15.7.2@prop-types
[2/2] bizcharts@^3.5.3-beta.0 installed at node_modules\_bizcharts@3.5.9@bizcharts
Recently updated (since 2021-05-02): 9 packages (detail see file E:\前端自学\react1\融职商场后台管理\antd_pro_simple\node_modules\.recently_updates.txt)
  Today:
    → bizcharts@3.5.9 › @antv/g2@3.5.15 › venn.js@0.2.20 › fmin@0.0.2 › tape@4.13.3 › string.prototype.trim@1.2.4 › es-abstract@1.18.0 › es-to-primitive@1.2.1 › is-symbol@^1.0.2(1.0.4) (03:12:11)
All packages installed (117 packages installed from npm registry, used 8s(network 8s), speed 816.88kB/s, json 113(383.88kB), tarball 5.97MB)

第七坑：

在 mock 文件夹中，无法直接打印数据在浏览器上显示

官方文档解释很少，在express第四版上查看
image.png
mock 类似后端，无法直接在浏览器中 consloe.log(req)打印出数据

解决：查看express官网，进去 v4 版本 Request 目录

在 Request 目录下按住 ctrl+f 搜索 app.postimage.png
得知在req.body可以获取到 mock 中的数据，并能通过console.log(req.body)打印到浏览器上

1
2
3
4
5
6
7
8
9
10
11
var express = require('express')

var app = express()

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

app.post('/profile', function (req, res, next) {
  console.log(req.body)
  res.json(req.body)
})
UI Umi
UmiJS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！