UmiJS CDN 部署之 publicPath

最新推荐文章于 2025-05-24 15:02:37 发布

转载最新推荐文章于 2025-05-24 15:02:37 发布 · 8.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/leili/blog/3055880

文章标签：

#webpack #runtime #ViewUI

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

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

为什么80%的码农都做不了架构师？>>>

静态资源在非根目录或 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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33754913

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Umi3入门到进阶-第六篇：构建与部署

无

05-16

本文详细介绍了Umi 3项目的构建与部署流程。首先，通过.umirc.ts文件配置构建参数，如outputPath和publicPath，并利用dynamicImport进行代码拆分优化。其次，探讨了构建性能优化策略，如开启dll提速和modern mode。最后，提供了部署到静态服务器（如GitHub Pages、Netlify）和自有服务器（Linux环境）的具体步骤，确保项目在不同环境中稳定运行。通过这些配置和优化，开发者可以高效完成Umi 3项目的交付。

配置文件--UmiJs

zz130428的博客

09-24

482

umi 允许在.umirc.js或config/config.js（二选一，.umirc.js优先）中进行配置，支持 ES6 语法。为简化说明，文档里只会出现。区分不同环境来指定配置。，所以通常需要配置到。

参与评论您还未登录，请先登录后发表或查看评论

UMI静态config文件实现接口请求地址动态配置

qq_45799465的博客

05-30

1161

umi在入口文件引入js文件的方法。

vue cli 3 打包部署测试出现net::ERR_ABORTED 404 (Not Found)问题解决

最新发布

06-26

处理静态资源路径（publicPath）动态设置具体步骤：第一步：安装qiankun```bashnpminstallqiankun-S```第二步：在入口文件（通常为src/app.js或src/app.ts）中导出qiankun要求的生命周期钩子注意：Umi3的入口文件是`...

node vue 打包部署 vendor.js文件太大的解决方式

qq_35410576的博客

09-24

661

node //建议改端口不建议开代理部署会很麻烦 //运行调试 npm run dev 开发 /config/index.js dev 建议改端口 port: 40003, 建议autoOpenBrowser: 由false改为true, 打包 // 打包 npm run build // 打包分析 npm run build --report js、css404解决方法 /config/index.js build中的assetsPublicPath: '/'改"./",/

这是静态文件路径不是域名

06-05

1. **CDN部署必选项** ```typescript export default defineConfig({ publicPath: 'https://cdn.example.com/secssc/', hash: true, // 添加文件哈希防止缓存问题 manifest: true // 生成资源映射文件 }); ``...

中台项目-微前端qiankun-umimax

badbaby52906的博客

05-24

1028

这篇文章介绍了微前端架构的概念、优势及主流实现方案，重点讲解了基于qiankun的微前端项目实战。主要内容包括：微前端概念：将前端应用拆分为独立模块，支持不同技术栈和独立开发部署主流方案对比：qiankun、single-spa、ModuleFederation等 qiankun实战：基座改造（Umi/非Umi项目）子应用改造（Umi/Vue3+Vite/React）关键技术点：样式隔离（Shadow DOM） JS沙箱机制公共依赖处理应用间通信部署方案：同服务器/异服务器部署配置文章提

我想让你充当前端开发专家。我将提供一些关于Js、Node等前端代码问题的具体信息，而你的工作就是想出为我解决问题的策略。这可能包括建议代码、代码逻辑思路策略。我的请求是【umi3.5在defineConfig里能设置公用的域名吗】

06-05

静态资源的基础路径（publicPath）2.API请求的基础路径（通常通过proxy代理或直接配置请求的baseUrl）下面给出两种常见的配置方式：一、设置静态资源的公共路径（publicPath）：如果静态资源部署在CDN或者某个域名的...

umi 常用配置

weixin_43294560的博客

07-18

6046

在.umirc.ts中的defineConfig的对象中配置 1、配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。 hash:true, 默认为false 2、配置项目的根目录,还需配置第3个 base:'/x/' 默认为'/' 其中: 访问'/x/'路径才能访问项目的根路由官方解释: 你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到

【Umi】umirc 常用配置

小秀的博客

11-30

659

默认是从 / 开始，但是如果我们将项目打包文件没有放入在服务器的根目录，而是在某个文件下，这时这些打包文件中的互相应用将找不到正确路径。jsMinifier (webpack) 、jsMinifierOptions 配置项。historyWithQuery 配置项。chainWebpack 配置项。inlineLimit 配置项。externals 配置项等。publicPath 配置项。history 配置项。devtool 配置项。plugins 配置项。proxy 配置项。

umi.js

Nieyigo的博客

12-28

1293

umi学习（umi4）

weixin_60968779的博客

03-03

5342

umi学习

umi环境相关配置踩坑

weixin_43024757的博客

07-17

345

配置注释掉重跑，即本地访问时让他使用本地的。项目跑起来后，可以看到页面是注入了。本地运行公司项目时，控制台报错，所以最终的解决办法也是把上面的。公司项目用的技术栈是。

修改webpack的publicPath为动态设置以适配公司活动平台

letterTiger的博客

02-05

6293

背景：我们需要将React开发的应用部署到一个活动搭建平台上，这意味我们只需要上传源码，没有搭建服务器的环节，没有配置Nginx的环节。具体步骤就是在该平台新建一个活动，然后将自己的源码传到这个活动下，然后打开这个活动提供的地址，然后就能够看到页面。我们上传的js文件main.js会得到一个js/main.js的路径，然后将这个路径放到html的script标签的src属性上即可。main.c...

react+umi3.x子应用直接装qiankun要怎么配置项目

06-26

<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) => {...}); ```