我所在的組有很多項目，其中一個是對外供用戶使用的以下簡稱項目A，還有一個是對內進行資源管理提高效率的以下簡稱項目B。項目Acss解析用postcss，ui組件用element ui，項目B css解析用less，ui組件使用內部開發的一套ui庫。
接到一個需求：同事辛辛苦苦做的在A項目中的某個功能（六七個頁面）能不能一股腦的嵌入B項目呢？最好不用開發，你們前端不都是Vue 組件麼？複用一下噻？
剛接到需求的時候大腦裏跑過了千萬匹?，但是遇到困難不能躲啊。冷靜思考一下，先iframe被排除了，因爲iframe只能整體的嵌入，而我們想要的可能只是頁面中的一部分。第一次嘗試把A整個項目手動copy到B項目中，通過相對路徑來引用。最開始的報錯是postcss解析報錯，費了半天勁解決後就是，js重名，css覆蓋，字體衝突。總結一下遇到的問題list 如下：
- postcss loader配置失敗
- 嵌入A後A全局樣式污染B全局樣式
- B中嵌入的ui庫和A的element組件衝突 (e.g. v-loading)
- 登錄狀態如何保持
- webpack alias重名，都叫utils，都叫components
- A引入B後樣式丟失
- 自定義的組件覆蓋了el樣式
- B中的字體庫和element中的衝突了（content: "\e69a"顯示了不同的圖標）
- build failed
解決方法
- vue-loader的設置不熟悉，按照官網的配置不生效。原來vue文件在解析的時候會根據language解析成不同後綴名的文件。只需要
{ test: /\.postcss$/, use : cssLoaders('postcss') }即可。 - 如我們所知A中有很多全局樣式，引入部分頁面缺了這部分全局樣式又沒法正常渲染，藉助postcss-plugin-namespace可以給postcss的文件加一個前綴，確保不因小失大，污染整個B。
- 因爲element中的組件比內部開發的組件庫健壯的多，大部分都是element覆蓋之。
- A中頁面要想正常工作首先是以登錄爲前提的。還有一條路就是在api上帶上某個特定標識，由此也引發了一個小問題。需要改變location search,url會replace，刷新頁面。還可以優化。
- A中的webpack alias我不敢改，我只能委曲求全改B中的，改成不重名的。
- A依賴了好多全局樣式，一個一個引入。有些B中的樣式跟A中的確實是衝突，確實影響到了。只好自己調整調整，但是需要調整的量很小，就兩三處。
- 有同事把element的源碼拿到項目中使用。而且還稍加改動了css。刪掉就好了。
- 要想讓A中頁面正常渲染圖標也必不可少，但是element中的字體是font-family: element-icons!important;非常強暴的把所有的圖標都用自己的這套字體庫。沒辦法，只好也把我們自己的字體庫也加上了!important。
- 最終以submodule的方式引入A。A中的.postcssrc.js 和B全局的衝突了。按照官方的options配置，但是還是沒成功，只好在gitlab hook中刪掉submodule中的.postcssrc.js。這樣不好，但是能work。（https://github.com/postcss/postcss/issues/1295）
思考
最終不是太完美的上線了，還有一些地方可以優化。
雖然嵌入的Acss樣式不會影響B全局，但是B全局的樣式還是會影響嵌入的A樣式。
js方法最好能互不影響。
微前端的材料看了不少，但還是沒找到小成本能實現的方式，可能需要在規劃兩個或多個項目時就已經想好了實現的方式，有主項目，有include項目等等。對於兩個已經成熟的項目如何互相include，甚至不同框架的項目怎麼融合，啊啊啊~，這個題超綱了。
參考資料
https://tech.meituan.com/2018/09/06/fe-tiny-spa.html
https://forum.vuejs.org/t/advice-to-organize-multiple-vue-projects/15078