为什么要用微前端架构开发SPA应用？你将面临一个问题。随着功能越来越多，项目的主js文件越来越大，影响了初始加载速度，用户体验越来越差。要解决这个问题，就需要引入“微前端”的方案，根据业务需求拆分应用。选择哪种微前端方案也要根据公司的业务情况来选择。因为我们公司的应用是面向工具的，复杂度不大，主要功能模块比较稳定，后续添加的功能都是面向操作的页面，所以暂时拆分成两个项目（main和sub），function申请+运营申请。同时采用最简单粗暴的【MPA+路由分发】方案。下面仅以vue项目1为例说明主要使用点，将老项目拆分为两个项目，通过路由定义来区分。例如：主项目routing/main/*子项目routing/action/*2，修改子项目的baseUrlbaseUrl修改结果：域名+/action/3，服务器需要修改nginxserver{listen80;server\_name项目域名；location/{root/server项目地址/dist;过期-1；try\_files$uri$uri//index.html;}location/action/{别名/子项目地址/dist/;过期-1；try\_files$uriindex.html=404;}}4.修改内部跳转方式，跳转子项目页面使用location。href=route5.为了进一步优化（可选），可以固定引用主项目和子项目的共享资源。这里需要在构建时修改配置文件。对应的nginx配置server{listen80;server\_name项目域名；位置~\*MP\_verify\_(.\*)\\.txt${返回200$1;}location/action/{别名子项目路径/dist/;过期-1；try\_files$uriindex.html=404;}location~\*/action/(.\*\\.(gif|jpg|jpeg|bmp|png|txt|js|css)$){别名子项目路径/dist/$1;30天后到期；}location~.\*\\.(gif|jpg|jpeg|bmp|png|txt|js|css)${root主项目路径/dist;30天后到期；try\_files$uri$uri//index.html;}location/{root主项目路径/dist;过期-1；try\_files$uri$uri//index.html;在开发方面，没有完美的解决方案，只有适合自己的方案。
