V4 前端项目接入完整流程
从脚手架新建项目
当我现在从 前端脚手架项目 fork 了一个新项目，
项目启动
全局搜索项目中的af-example-web和example关键词，替换为你自己的业务模块名
主要有
-
package.json中的 name, 虽然没什么用 v4 子应用一般不会发包了 -
jenkinsfile/jenkinsfile_release中的af-example-web替换为你自己的业务模块名 -
.env文件VUE_APP_PUBLIC_PATH改成自己的模块名 -
readme.md中的 内容替换成自己模块的说明
- 资源管理新增路由 同时调整项目本身的路由
授予权限并且重新登陆之后会有菜单可以访问
项目接入微前端
- 在 af-system-vue-web 注册微应用
name 是 example 配置的 VUE_APP_PUBLIC_PATH 此处我配置的是 edu-student-web
- 在资源管理修改路由
子目录需要加上应用名称前缀
- 本地测试
在本地测试的时候，env 文件不是单页面模式且没有配置 VUE_APP_PUBLIC_PATH
手动修改 .env.development 文件
VUE_APP_PUBLIC_PATH=/
VUE_APP_SINGLE_PAPER=FALSE
改为
VUE_APP_PUBLIC_PATH=/你的应用名称
VUE_APP_SINGLE_PAPER=TRUE
在 af-system-vue-web 项目中，微应用的请求转发是通过循环实现的
我们先把这个改成 本地端口
启动 af-system-vue-web 项目 （如果在配置资源管理前登录了，需要推出登录重新登录下）
现在微前端已经接入完成了
.env.development 记得还原不要提交哈 本地开发环境还是用 vue2client 架构 不用微服务架构
配置自动化部署
1. 在 jenkins 中配置自动化部署
然后起个名字，使用下方的复制功能，输入基于 vue2client 架构的同样的项目
比如 af-revenue、af-liuli-web 等等
2. 修改配置
新建项目之后点击项目名称进入项目详情 选择左侧菜单的配置
然后点击添加新的 webhook
最下面的 ssl 验证关掉
保存之后你再提交一般就会自动部署了
k8s 中配置
如果你进行自动部署了 去配置好 nginx 理论上就能通过 k8s 的前端入口访问了
其他项目接入微前端
项目启动
自己看对应的文档
项目接入微前端
一般来说需要对子应用进行改造 详情查看 microapp 的官方文档
路由配置和脚手架的配置类似，自己琢磨下
配置自动化部署
和脚手架配置类似，但是可能要新增 jenkinsfile 文件
k8s 中配置
和脚手架配置类似