之前一直想知道，如何在egg中使用umi，最近刚好搭建了一下，现记录一下。
一.搭建egg项目
参考文档，搭建egg项目：地址
主要命令如下：
mkdir egg-example && cd egg-example // 创建egg-example文件
npm init egg --type=simple // 初始化egg模版
npm i // 安装依赖
npm run dev // 启动项目
打开浏览器窗口：一般默认是7001，http://localhost:7001
二.搭建umi项目
参考文档，搭建umi项目：地址
因为主要在egg项目中使用，所以，在egg-example中创建新命令，主要命令如下：
cd egg-example/app && mkdir web && cd web // 创建web目录
yarn create @umijs/umi-app // 创建项目
yarn // 安装依赖
新创建的好的umi项目中有package.json的包管理，我为了统一，把相关依赖都拷贝到根目录下的package.json文件中
三.安装插件
umi文件其实主要是静态资源（不涉及ssr），egg中使用静态资源需要配置插件egg-view-assets，还有一个模版的插件,egg-view-nunjucks，安装依赖和设置配置
// 安装依赖
npm i egg-view-assets --save
npm i egg-view-nunjucks --save
// 配置插件 config/plugin.js
exports.assets = {
enable:true,
package:'egg-view-assets'
}
exports.assets = {
enable:true,
package:'egg-view-nunjucks'
}
// 配置view的解析模版 - config/config.default.js
config.view = { mapping: { ".html": "nunjucks" } };
// 配置静态文件的文件 - config/config.default.js config.assets = { publicPath:'/public/', devServer:{ debug: true, command: 'umi dev --port={port}', port: 8002, env: { APP_ROOT: path.join(__dirname, "../app/web"), BROWSER: 'none', ESLINT: 'none', SOCKET_SERVER: 'http://127.0.0.1:{port}' }, } }
四.新建html文件
在egg-example/app目录下新建view的文件夹，在该文件夹下新建html的文件
<!doctype html><html><head><meta charset="utf-8" /><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="format-detection" content="telephone=no"/><meta name="format-detection" content="email=no"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title>测试呵呵</title>{{ helper.assets.getStyle('umi.css') | safe }}</head><body><div id="root"></div><script> window.routerBase = '/'; window.resourceBaseUrl = '{{ helper.assets.resourceBase }}';</script>{{ helper.assets.getScript('umi.js') | safe }}</body></html>
五.配置路由渲染
在 egg-example/app/router.js 中，添加以下代码：
router.get('*', controller.home.index);
在 egg-example/app/controller/home.js 的控制器中，新增index的函数：
async index() { await this.ctx.render('index.html'); }
重新运行项目，打开浏览器：
npm run dev
打开 http://localhost:7001 预览
完结，撒花🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
