2025最新umi入门指南：从安装到部署的完整流程
【免费下载链接】umi A framework in react community ✨ 
项目地址: https://gitcode.com/gh_mirrors/umi8/umi
你是否还在为React项目搭建繁琐的配置而头疼？是否想快速开发并部署一个现代化的前端应用？本文将带你从零开始，用umi框架完成从环境搭建到应用部署的全流程，让你轻松掌握这个React社区的优秀框架。读完本文，你将能够：安装umi、创建并运行项目、理解项目结构、配置路由、构建生产版本以及部署应用到各种环境。
安装umi
umi是一个可插拔的企业级React应用框架，首先我们需要安装它。推荐使用yarn或npm进行全局安装，这样你就可以在任何地方使用umi命令了。
使用yarn安装：
yarn global add umi
或者使用npm安装：
npm install -g umi
安装完成后，你可以通过以下命令检查umi的版本，确认安装成功：
umi -v
如果安装成功，你将看到类似umi@1.0.0的版本信息。官方安装文档可以参考docs/guide/getting-started.md。
创建第一个umi应用
安装好umi后，我们来创建一个新的应用。首先创建一个项目文件夹并进入：
mkdir myapp
cd myapp
目前umi暂时没有提供脚手架，之后会添加。不过没关系，我们可以手动创建项目结构。
项目结构与第一个页面
umi采用约定式路由，即根据pages目录结构自动生成路由。所以我们需要创建pages目录，并在其中添加我们的第一个页面。
创建pages目录并新建index.js文件：
mkdir pages
echo 'export default () => <div>Index Page</div>' > pages/index.js
如果你使用Windows系统，可以手动创建pages/index.js文件，并输入以下内容：
export default () => <div>Index Page</div>;
关于umi应用的详细结构，你可以参考官方文档docs/guide/app-structure.md。
启动开发服务器
现在我们可以启动开发服务器，预览我们的应用了。在项目根目录下运行：
umi dev
成功启动后，你将看到类似以下的输出：
Compiled successfully!
You can now view Your App in the browser.
Local: http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.
现在打开浏览器访问http://localhost:8000，你将看到我们刚刚创建的Index Page页面。
路由配置
umi的一大特色是约定式路由，即pages目录下的文件会自动生成对应的路由。例如，我们创建一个pages/list.js文件，就会自动生成一个/list路由。
让我们创建一个列表页面：
echo 'export default () => <div>List Page</div>' > pages/list.js
现在你可以通过http://localhost:8000/list访问这个新页面了。
如果你需要更复杂的路由配置，比如嵌套路由、动态路由等，可以参考官方文档docs/guide/router.md。
构建生产版本
当开发完成后，我们需要构建生产版本的应用。运行以下命令：
umi build
构建成功后，你将看到类似以下的输出：
Compiled successfully.
File sizes after gzip:
52.09 KB static/umi.2b7e5e82.js
186 B static/__common-umi.6a75ebe1.async.js
构建产物会生成在dist目录下。你可以通过以下命令查看dist目录结构：
tree ./dist
输出应该类似：
dist
├── index.html
└── static
├── __common-umi.6a75ebe1.async.js
└── umi.2b7e5e82.js
1 directory, 3 files
关于构建的更多细节，可以参考docs/guide/getting-started.md。
部署应用
构建完成后，我们得到的dist目录是可以直接部署的。下面介绍几种常见的部署方式。
本地预览
在部署之前，我们可以先在本地预览生产版本。我们可以使用serve工具来启动一个静态服务器：
npm i serve -g
cd dist
serve
然后访问http://localhost:5000即可预览生产版本的应用。
部署到静态服务器
dist目录中的文件可以直接部署到任何静态文件服务器，如Nginx、Apache等。只需将dist目录下的所有文件复制到服务器的网站根目录即可。
部署静态资源到CDN
如果你的静态资源需要部署到CDN，可以通过配置publicPath来实现。在项目根目录下创建或编辑.umirc.js文件，添加以下配置：
{
"publicPath": "http://yourcdn/path/to/static/"
}
或者在构建时通过环境变量指定：
PUBLIC_PATH=http://yourcdn/path/to/static/ umi build
这样，构建出的HTML文件会引用CDN上的静态资源。详细配置可以参考docs/guide/deploy.md。
部署到非根路径
有时我们需要将应用部署到域名的子路径下，比如https://example.com/myapp/。这时需要配置BASE_URL环境变量：
BASE_URL=/myapp/ umi build
这会确保路由正确匹配子路径。更多细节可以参考docs/guide/deploy.md。
静态化部署
在一些无法配置服务端路由的场景下，我们可以将应用静态化，生成每个路由对应的HTML文件。在.umirc.js中添加以下配置：
export default {
exportStatic: {},
}
然后构建应用：
umi build
构建后，dist目录会为每个路由生成对应的HTML文件：
./dist
├── index.html
├── list
│ └── index.html
└── static
├── pages__index.5c0f5f51.async.js
├── pages__list.f940b099.async.js
├── umi.2eaebd79.js
└── umi.f4cb51da.css
如果需要生成带.html后缀的文件（如list.html），可以配置：
export default {
exportStatic: {
htmlSuffix: true,
},
}
静态化部署的详细说明可以参考docs/guide/deploy.md。
总结与展望
通过本文的学习，你已经掌握了umi框架从安装到部署的完整流程。我们学习了如何创建项目、编写页面、配置路由、构建生产版本以及部署到不同环境。umi的约定式路由和零配置特性让React开发变得简单高效，而丰富的插件系统和配置选项又满足了复杂项目的需求。
接下来，你可以深入学习umi的更多高级特性，如：
- 配置详解：docs/guide/config.md
- 环境变量：docs/guide/env-variables.md
- 路由高级用法：docs/guide/router.md
- 与dva集成：docs/guide/with-dva.md
希望本文能帮助你快速上手umi框架，开发出优秀的React应用！如果你觉得本文对你有帮助，请点赞、收藏并关注我们，获取更多前端开发教程。下期我们将介绍umi的高级特性和性能优化技巧，敬请期待！
【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
