簡介：
本文是對qiankun微服務的簡單探索，只是嘗試了基於qiankun架構接入最簡單的應用場景，並記錄了這個過程中遇到的問題，和一些簡單的理解。文章有點長，但是並不復雜，放了很多截圖。
qiankun官網地址：
https://qiankun.umijs.org/zh/guide/tutorial
准備工作：
通過官網了解，qiankun主要分為兩部分：（1）負責路由注冊，資源加載的主服務（2）所有拆分后的子服務。通過主服務的統一調度，完成對子服務的管理。
所以，主服務是單獨的一層，作為所有子服務的統一訪問入口，子服務則在主服務后面一層。
在這里，我們創建兩個子服務的demo，通過vue-cli快速創建即可。主服務的話，搭建最簡單的webpack構建環境，只在entry文件中寫qiankun的api調用邏輯，其他任何內容不加。下面對主服務和子服務做具體介紹。
主服務：
文件目錄結構：
目錄及內容介紹：
src：src文件夾里有兩個文件，index.js和index.html。index.html就是最簡單的html模板文件，webpack基於此文件輸入最終的/dist/index.html。index.js中包含了qiankun的主服務所有邏輯，非常簡單。
index.html如圖：
index.js 如圖：
server：server文件夾里只有一個server.pro.js，里面是最簡單的基於node的http服務。由於主服務是webpack構建環境，所以本地調試要依賴webpack-dev-server。但是我在調試中發現，主服務其實對靜態資源有兩部分功能。一個是對.js，.css等靜態資源的相應，另外一個是對路由（url）的相應。對靜態資源的相應比較好處理，但是對路由的相應卻有個特殊的地方。比如url是"/demo1/a"，/demo2/b，/pro......這些路由其實對主服務而言，只需要返回index.html就好。因為這些路由其實都是子服務的路由，主服務接收這些路由后，只需要加載主服務自己的index.html文件，執行index.html依賴的js，即可動態加載子服務js資源，然后命中路由，渲染頁面即可。對於第二部分功能需求，webpack-dev-server配置起來比較麻煩，所以，我就寫了一個簡單的http服務用於主服務調試。server.pro.js如下圖：
dist：dist文件夾中存放了webpack構建后的資源，包括index.html和js文件夾，js文件夾下包含了所有構建后的js資源
其他文件夾及文件的內容無需關注，只是為了搭建最簡單的webpack環境。
子服務：
子服務通過vue/cli快速創建了兩個項目，分別占用8080端口和8081端口，代碼幾乎一樣，只有演示頁面的內容有點差別。安裝：npm install -g @vue/cli，創建項目：vue create project-1 && vue create project-2。這里介紹project-1項目：
文件目錄結構：
上面的目錄結構基本是vue/cli默認生成的目錄結構，只是在此基礎上新增了vue.config.js和public-path.js。由於vue/cli默認沒集成vue-router，所以先在子服務裝了vue-router。
App.vue文件：最簡單的跟組件，只有包含router-view
HelloWorld.vue：演示頁面：
按照官網文檔，子服務接入qiankun需要3步操作（基於vue）
第一步：在src項目新增：public-path.js，並在main.js內引入public-path.js。內容如下：
這個配置應該是對子服務中的某些靜態資源改成了絕對路徑。在調試過程中發現，主服務對子服務的js和css是可以正常轉發的，但是對於子服務圖片資源（相對路徑）的請求，最終指向了主服務的ip。然后添加了public-path.js就解決了這個問題。
第二步：
修改入口main.js文件，添加qiankun的生命周期
第三步：修改vue.config.js文件
至此，主服務和子服務的代碼及目錄結構介紹完畢。本地調試的時候，需要分別啟動主服務和兩個子服務。主服務通過node server/server.pro.js 啟動前需要先執行webpack的build。然后通過http://127.0.0.1:7000/子服務路由 即可訪問頁面。