这是比较常见的一种部署方式,比如开发时是前后端分离的,部署的时候,由服务端提供一个容器,存放我们编译之后的静态页面。
执行 umi 的编译脚本
$ npm run build
> @ build /Users/xiaohuoni/Documents/GitHub/umi-course/hero
> umi build
[09:48:33] webpack compiled in 12s 48ms
DONE Compiled successfully in 12057ms 09:48:33
File sizes after gzip:
320.5 KB dist/umi.js
15.31 KB dist/umi.css
将生成 dist 目录下面的文件拷贝到服务端提供的容器即可。
注意部署的时候,要将所有的请求指向正确的服务。mock 服务不可用。
这里常常会遇到一个问题。
部署完之后,页面没有报错,但是确是空白页。
这时候就可以考虑可能是遇到了非根目录部署的问题了
可通过配置 base 解决。
export default {
base: '/path/to/your/app/root',
};
比如服务端给你的访问链接是 https://www.xxx.com/web
那这里你就可以尝试配置
export default {
base: '/web',
};