Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation

This article introduces the front-end implementation of a product middle platform in the e-commerce domain, focusing on visualization technology and micro-frontend architecture.

Background: In e-commerce, product management systems handle product creation, editing, and duplication. The product middle platform emerged to maximize reuse across multiple business scenarios (internal and external).

Visualization Technology: The system uses visualization technology allowing business operators to see real-time preview of configured data. The left side of the page displays the product preview (H5 page in iframe), which is UI-isolated from but data-shared with the parent page.

uni-render Solution: The core challenge was enabling iframe and parent window to share Vuex store without postMessage. The uni-render solution treats iframe as a DOM node, renders child components exposed by iframe, and shares Vue store between windows. Key implementation steps include: configuring Vue as multi-page application, creating iframe component and sandbox Vue, mounting sandbox Vue and store to global object in management page entry, and exposing them in preview page entry.

Why Sandbox Vue: Due to Vue's singleton mechanism, child windows rendered by parent Vue would override parent's Vue objects for use, filter, mixin, global directives, and components. Sandbox Vue provides isolation to prevent interference between parent and child windows.

Micro-frontend Architecture: The product middle platform uses qiankun framework to integrate into external business projects. Key design aspects include: code access (registering micro-apps in main app), cross-domain handling (main app forwarding), routing adaptation (adding baseUrl matching activeRule), multi-page configuration, data communication (combining initGlobalState and window approaches), environment differentiation, local debugging (using localStorage for dynamic entry), and permission management.

Pitfall Experiences: 1) Cross-domain issue when uni-render meets qiankun - solved by setting document.domain in HTML; 2) Ueditor issues in qiankun sub-app - solved by excludeAssetFilter and modifying request URLs.