UmiJS CDN 部署之 publicPath

当静态资源位于非根目录或CDN时,UmiJS需要配置publicPath来指向资源路径。runtimePublicPath提供了一种在HTML中根据环境动态设置publicPath的方法,以实现不同环境的适配。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

静态资源在非根目录或 cdn 这时,就需要配置 publicPath。至于 publicPath 是啥?具体看 webpack 文档,把他指向静态资源(js、css、图片、字体等)所在的路径。

export default { 
  publicPath: "http://yourcdn/path/to/static/" 
}

使用 runtime 的 publicPath

对于需要在 html 里管理 publicPath 的场景,比如在 html 里判断环境做不同的输出,可通过配置 runtimePublicPath 为解决。

export default { 
  runtimePublicPath: true, 
}; 

然后在 html 里输出:

<script> window.publicPath = <%= YOUR PUBLIC_PATH %> </script>

https://umijs.org/zh/guide/deploy.html

转载于:https://my.oschina.net/leili/blog/3055880

<think>我们正在处理一个关于在ReactUmi3.x子应用中集成qiankun微前端框架的问题。根据用户的需求,我们需要配置子应用以使其能够作为微应用被qiankun主应用加载。根据引用[1]和引用[2]的内容,我们可以得到以下关键点:1.在子应用中,我们需要在`app.ts`(或`app.js`)中导出qiankun的生命周期钩子(bootstrap,mount,unmount)。2.在Umi的配置文件(`.umirc.ts`)中,我们需要配置`qiankun:{slave:{}}`,以表明这是一个微应用(slave)。因此,我们可以按照以下步骤进行配置:###步骤1:配置`.umirc.ts`在Umi项目的根目录下,找到`.umirc.ts`文件(如果没有,可以创建),并添加qiankun的slave配置。```typescript//.umirc.tsimport{defineConfig}from'umi';exportdefaultdefineConfig({//其他配置...qiankun:{slave:{},},});```###步骤2:在`app.ts`中导出qiankun生命周期在`src/app.ts`中,我们需要导出qiankun的生命周期函数。如果文件不存在,则创建它。```typescript//src/app.tsexportconstqiankun={//应用加载之前asyncbootstrap(props:any){console.log('appbootstrap',props);},//应用render之前触发asyncmount(props:any){console.log('appmount',props);},//应用卸载之后触发asyncunmount(props:any){console.log('appunmount',props);},};```###步骤3:配置子应用打包输出为UMD格式(可选,但推荐)为了确保子应用能够被主应用正确加载,我们需要将子应用打包成UMD格式。Umi默认支持,但我们需要在配置中确认。在`.umirc.ts`中,确保没有禁用`runtimePublicPath`,并且设置`publicPath`以便正确加载资源(特别是在生产环境)。```typescript//.umirc.tsexportdefaultdefineConfig({//...其他配置//设置publicPath,确保资源路径正确publicPath:process.env.NODE_ENV==='production'?'//your-cdn-domain.com/path/':'/',//开启runtimePublicPath,让资源路径支持动态配置(比如通过主应用下发)runtimePublicPath:true,});```###步骤4:配置子应用的路由模式由于子应用可能被主应用加载到不同的路由路径下,我们需要确保子应用的路由能够适应这种嵌套。在Umi中,我们可以使用`history`配置为`memory`,或者使用`browser`但设置`base`。根据引用[2]中提到的,可以配置`history:{type:'memory'}`,但这并不是必须的,取决于主应用的路由模式。如果主应用使用的是浏览器历史记录(browserhistory),那么子应用也可以使用browserhistory,但需要设置`base`为子应用在主应用中的路由前缀。例如,如果子应用被挂载到主应用的`/subapp`路径下,那么子应用应配置:```typescript//.umirc.tsexportdefaultdefineConfig({//...其他配置base:'/subapp',history:{type:'browser',},});```如果主应用是hash路由,或者希望子应用完全独立于主应用的路由,可以使用`memory`路由。但是,使用`memory`路由时,子应用内部的路由变化不会反映到浏览器的地址栏,因此需要根据实际需求选择。###步骤5:开发环境跨域支持(可选)在开发环境下,由于子应用是独立启动的,主应用加载子应用时可能会遇到跨域问题。为了解决这个问题,我们需要在子应用中设置响应头允许跨域。在Umi中,我们可以通过配置`proxy`或者修改服务器响应头来实现。但更简单的方式是在主应用中配置代理,或者在子应用启动时添加跨域响应头。对于子应用,可以在本地开发服务器的配置中添加(如果使用Umi的devServer,可以在`.umirc.ts`中配置):```typescript//.umirc.tsexportdefaultdefineConfig({//...其他配置devServer:{headers:{'Access-Control-Allow-Origin':'*',},},});```或者,如果你使用的是Umi3.x,可以通过环境变量`SOCKET_SERVER`来配置,但更直接的方式是在启动脚本中设置环境变量。不过,Umi默认在开发环境下已经支持了跨域(通过设置`webpack-dev-server`的`headers`),所以可能不需要额外配置。###总结以上步骤完成了在Umi3.x子应用中集成qiankun的基本配置。配置完成后,子应用就可以被qiankun主应用正确加载了。注意事项:-子应用需要独立运行,所以需要确保子应用可以独立启动(不需要主应用也能运行)。-在部署时,确保主应用能够正确加载子应用的入口文件(通常是`index.html`和打包后的JS文件)。-子应用的生命周期函数中,`mount`方法必须负责渲染子应用,但Umi内部已经处理了,所以我们只需要导出生命周期即可。§§相关问题§§1.如何配置qiankun主应用来加载这个Umi子应用?2.在微前端架构中,如何解决子应用之间的状态隔离和通信问题?3.如何优化qiankun微应用的资源加载性能?4.在Umi子应用中,如何根据主应用下发的信息进行动态配置(如公共路径)?</think>### 在React Umi 3.x子应用中集成qiankun微前端框架的配置方法 #### 1. **安装必要依赖** ```bash npm install @umijs/plugin-qiankun --save-dev # 或 yarn add @umijs/plugin-qiankun -D ``` #### 2. **配置`.umirc.ts`文件** 在项目根目录的配置文件中启用qiankun的slave模式: ```typescript // .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ qiankun: { slave: {}, // 启用微应用模式 }, // 必须配置为memory路由模式 history: { type: 'memory' }, // 确保开启runtimePublicPath runtimePublicPath: true, // 配置跨域支持(开发环境) devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, }, }); ``` #### 3. **配置生命周期钩子** 在`src/app.ts`中实现qiankun的生命周期函数: ```typescript // src/app.ts export const qiankun = { // 初始化钩子 async bootstrap(props) { console.log('[子应用] bootstrap', props); }, // 挂载钩子 async mount(props) { console.log('[子应用] mount', props); // 这里可接收主应用传递的数据 }, // 卸载钩子 async unmount(props) { console.log('[子应用] unmount', props); // 清理操作 }, // 更新钩子(可选) async update(props) { console.log('[子应用] update', props); }, }; ``` #### 4. **路由配置要求** 确保路由配置支持嵌套路由(主应用路由+子应用路由): ```typescript // config/routes.ts export default [ { path: '/', component: '@/layouts/index', routes: [ { path: '/sub-page', component: '@/pages/sub' }, ], }, ]; ``` #### 5. **资源路径配置(生产环境)** 在`src/app.ts`中动态设置publicPath: ```typescript // src/app.ts export function patchRoutes({ routes }) { // 动态设置资源路径 window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ && (__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__); } ``` #### 6. **启动参数调整** 修改`package.json`的启动命令: ```json { "scripts": { "start": "umi dev --port=8001", "build": "umi build" } } ``` #### 验证步骤: 1. 主应用配置子应用入口: ```js // 主应用配置 registerMicroApps([ { name: 'react-subapp', entry: '//localhost:8001', container: '#sub-container', activeRule: '/sub-app', } ]); ``` 2. 启动子应用:`npm run start` 3. 访问主应用路由`/sub-app`应加载子应用 #### 常见问题解决: - **跨域问题**:确保子应用devServer设置`Access-Control-Allow-Origin: *` - **路由冲突**:使用`base`参数隔离路由(参考[^2]) - **样式隔离**:在主应用启用`sandbox: { strictStyleIsolation: true }` - **通信方案**:通过`props`传递通信方法: ```ts // 主应用传递 mount({ onGlobalStateChange, setGlobalState }) // 子应用使用 props.onGlobalStateChange((state) => {...}); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值