之前已經分享過微前端，至於落地還是不落地就看公司和專案了，今天基於微前端做了個小demo，分享一下。可以去qiankun官網看看，包括微前端核心設計理念、為什麼不是ifram和快速上手及一些問題都很清楚。
因為自己一直用的都是vue，所以基座和子應用都是用vue腳手架快速搭建，至於接入react和jquery專案的，還得自己去研究測試，今天只是展示demo，**的含義官網都有很詳細的解釋，這邊就不注釋了。
基座安裝依賴：npm install qiankun -s
然後main.js裡面配置：
name:'admin',
entry:'//localhost:8081/',
container:'#admin',
activerule:'/admin'
name:'factory',
entry:'//localhost:8082/',
container:'#factory',
activerule:'/factory'
name:'frontend',
entry:'//localhost:8083/',
container:'#frontend',
activerule:'/frontend'
start();
加個判斷只是單純的控制一下顯示隱藏基座應用。
子應用不需要什麼依賴，直接main.js配置：
let instance = null;
function render()
export async function bootstrap(){}
export async function mount(props)
export async function unmount()
打包和開發需要配置：
module.exports = {
devserver: {
port: '8082',
headers:{
'access-control-allow-origin':'*'
configurewebpack:{
output:{
library:'factory',
librarytarget:'umd'
開發配置允許跨域，因為qiankun是以fetch請求資源，打包需要指定庫和模式。
這些配置官網都有，這邊提一些自己遇到的一些小狀況：
子應用通過基座關聯，路由是都要匹配某個key的，所以子應用要在路由那邊配置base，這樣子應用自己的路由切換都會帶上那個key了。基座和子應用樣式是不隔離的，官網也給出了解決方案，手動給字首。目前沒有找到不重新整理的子應用之間跳轉和子應用跳轉基座，其實就是用a標籤跳轉，只有通過基座跳轉才能不重新整理。基座應該建議充當路由導航，單純作為接入子應用。
打包之後，我用http-server當作伺服器啟動了專案，啟動需要--cors允許跨域，直接執行就可以了，子應用也可以單獨執行。如果是線上發布，那就得配置**還是允許跨域之類的，這就要看運維覺得怎麼做更好，但是絕對不是配置*。
這只是簡單的demo，建立了三個子應用跑一下看看。只有真正用來開發專案之後，才能發現還有很多狀況需要解決，這邊只是單純的跑個應用，**上傳git了：
(完)coding 個人筆記
前端跨域策略
假設頁面和屬於不同域，a頁面請求b頁面的內容.利用document.domain實現跨域的前提是這兩個網域名稱必須屬於同乙個基礎網域名稱，協議埠都要一致。主要是父域和子域之間的通訊 此時雖然能正確得到window.name的值，但是由於每次iframe.src的載入都執行iframe.onload，...
前端跨域問題
雖然羅列這麼多，但是我只用過一種 1 jsonp 2 document.domain iframe 3 location.hash iframe 4 window.name iframe 5 postmessage 6 跨域資源共享 cors 7 nginx 8 nodejs中介軟體 9 webso...
前端跨域問題
一 瀏覽器設定跨域 1，mac下chrome瀏覽器跨域 在終端中輸入以下命令 yourname是自己本機使用者名稱 開啟的chrome有 disable web security 相關的提示，說明瀏覽器設定跨域成功。2，window下chrome跨域 這個簡單了，直接右擊選擇chrome的屬性，在快...