JavaScript Vite 微前端怎么接入-js教程-PHP中文网

在 vite 项目中接入微前端，推荐使用 qiankun 框架。核心做法是：在主应用（host）中通过 registermicroapps 注册子应用并指定入口 url，同时在子应用（child）的 vite.config.js 中配置 base 和 server.proxy 以解决开发环境跨域问题，并在子应用代码中导出 bootstrap、mount、unmount 生命周期函数。

JavaScript Vite 微前端怎么接入

主应用如何注册并加载子应用

主应用通过引入 qiankun 库并调用 start() 启动沙箱，使用 registerMicroApps() 定义子应用的名称、路由匹配规则及入口地址。当路由变化匹配到子应用路径时，qiankun 会自动加载 HTML 入口文件并执行其导出的生命周期。

JavaScript Vite 微前端怎么接入

// main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-app', // 应用唯一 name
    entry: '//localhost:8081', // 子应用入口
    container: '#subview', // 挂载容器
    activeRule: '/react', // 激活路由规则
  },
]);

start();

上述代码定义了名为 react-app 的子应用，其入口为 //localhost:8081。当用户访问 /react 开头的路由时，主应用会将内容渲染到 ID 为 subview 的 DOM 节点中。预期结果是页面路由切换时，子应用的内容被动态插入且样式隔离。

子应用如何配置 Vite 代理与基础路径

子应用需确保资源加载路径正确，并在开发环境下配置代理以绕过浏览器的同源策略限制。在 vite.config.js 中设置 base 为相对路径或特定前缀，并通过 server.proxy 将静态资源请求转发到实际服务端口。

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

JavaScript Vite 微前端怎么接入

// vite.config.js
export default {
  base: '/',
  server: {
    port: 8081,
    proxy: {
      '/assets': {
        target: 'http://localhost:8081',
        changeOrigin: true,
      },
    },
  },
};

配置后，Vite 开发服务器监听 8081 端口。当主应用请求 /assets 下的静态资源时，代理将其转发至本地 8081 端口。这解决了开发环境中因主应用（如 8080）与子应用（8081）端口不同导致的跨域加载失败问题。预期结果是子应用的 JS/CSS 资源能正常加载到主应用沙箱中。

子应用必须导出哪些生命周期函数

子应用必须在入口文件（如 index.js 或 main.tsx）中显式导出 bootstrap、mount 和 unmount 三个生命周期函数。这些函数由 qiankun 在子应用的不同阶段调用，用于管理实例的生命周期和资源清理。

// subapp/src/index.js
export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  const { container } = props;
  ReactDOM.render(
    <app></app>,
    container ? container.querySelector('#root') : document.getElementById('root')
  );
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(
    container ? container.querySelector('#root') : document.getElementById('root')
  );
}

在上述代码中，mount 函数接收 props 参数，其中包含 container 对象，指示子应用应挂载到的 DOM 位置。unmount 函数负责卸载 React 组件以防止内存泄漏。若未导出这些函数，qiankun 将无法正确控制子应用的渲染与销毁，导致应用状态异常或报错。预期结果是子应用能随主应用路由的进入和离开正确地初始化和销毁。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南