สถาปัตยกรรมไมโครแอปพลิเคชันส่วนหน้าที่ใช้งานโดยอิงจากสแต็กเทคโนโลยี qiankun+vue2&vue3+Vite3+vite-plugin-qiankun ช่วยให้เกิดการสลับแอปพลิเคชันหลักและแอปพลิเคชันย่อย (เนื่องจากไม่มีอินเทอร์เฟซการเรียก เส้นทางของแอปพลิเคชันย่อย vue2 จึงอยู่ คงที่ ในขณะที่ vue3 เป็นเส้นทางคำขอแบบไดนามิก) หากคุณต้องการทราบถึงการสื่อสารระหว่างแอปพลิเคชันหลักและแอปพลิเคชันย่อย คุณสามารถอ้างอิงถึงบล็อกนี้และสร้างคำสั่งสคริปต์อัตโนมัติแบบง่าย คุณสามารถใช้คำสั่งหนึ่งบรรทัดในการติดตั้ง เริ่มต้นได้ จัดทำแพ็กเกจและปรับใช้การขึ้นต่อกันของแอปพลิเคชันย่อยทั้งหมด
เทคโนโลยีสแต็ก Vue-cli4+Vue2+Element-Ui+qiankun
เทคโนโลยีสแต็ก Vue-cli4+Vue2+Element-Ui+qiankun
เทคโนโลยีสแต็ก Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + micro front-end (qiankun)
// GitHub
git clone https: //github.com/wocwin/wocwin-qiankun.git
// Gitee
git clone https: //gitee.com/wocwin/wocwin-qiankun.git
ขึ้นอยู่กับการติดตั้ง
npm install
เริ่มโครงการ
npm run start
ดำเนินการในพื้นที่
// 1、运行完 npm run start
// 2、打开http://localhost:8100/ 进入主应用
// 3、逐个进入子应用(点击子应用左侧菜单栏logo可以回到主应用)
// 4、主应用的系统管理是所有应用的公共模板(用户、角色、菜单、部门、微前端、字典等)
หากคุณเข้าสู่แอปพลิเคชันหลักแล้วคลิกเพื่อเข้าสู่แอปพลิเคชันย่อย (เข้าสู่ระบบแอปพลิเคชันหลักก่อนจากนั้นจึงเปิดแท็บใหม่ในเบราว์เซอร์เพื่อเข้าสู่แอปพลิเคชันย่อยแต่ละรายการแยกกัน)
การปรับใช้ภายในเครื่องกับเซิร์ฟเวอร์จำเป็นต้องมีการกำหนดค่า NG (อ้างอิงถึง: ไฟล์ nginx.conf)