微前端子应用部署后主应用加载不到资源怎么办？

夏侯美丽提问于 2026-02-25 10:46:25 阅读 30

前端

我们用 qiankun 搭的微前端架构，本地开发没问题，但子应用部署到测试环境后，主应用加载时报 404，找不到子应用的 JS 和 CSS。子应用单独访问是正常的，路径也配了 publicPath，但还是不行。

尝试过在子应用的 webpack 配置里加 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__，也试过硬编码成部署的 CDN 地址，但要么报错，要么资源路径不对。现在卡在这儿了，不知道是部署配置问题还是 qiankun 的接入方式有问题？

部署方案

我来解答赞 5 收藏

反馈

2 条解答

百里付楠 Lv1

这个问题太经典了，我刚搞 qiankun 的时候也被坑了好久，本地跑得好好的，一上环境就各种 404，心态都崩了。

你这情况大概率是两个问题：publicPath 动态设置没生效，或者 nginx 配置没对。

先说 publicPath 这块。动态设置是对的，但你得确保代码执行顺序没问题。在子应用 src 目录下建个 public-path.js 文件：

if (window.__POWERED_BY_QIANKUN__) {

  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

然后在子应用入口文件的最顶部引入这个文件，一定要是最顶部，在 import 其他东西之前：

import './public-path';

import Vue from 'vue';

// 其他 imports...

还有个关键点，webpack 配置里的 publicPath 要设成空字符串或者 './'，别设成具体地址，让 qiankun 动态注入。

然后是 nginx 配置，这个坑了我好久。子应用部署后，nginx 要支持 history 模式，不然刷新或者直接访问子应用路由会 404：

location /sub-app {

  root /usr/share/nginx/html;

  index index.html;

  try_files $uri $uri/ /sub-app/index.html;

}

另外跨域问题也得注意，主应用从别的域加载子应用资源，nginx 得加响应头：

location /sub-app {

  add_header Access-Control-Allow-Origin *;

  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

  # 其他配置...

}

你排查的时候可以打开浏览器控制台，看下请求的资源路径到底是啥，对比一下实际部署的路径，基本就能定位问题了。

希望能帮到你，微前端这玩意儿配置确实有点折腾，搞定了就好了。

2026-03-02 13:14

迷人的胜换 Lv1

这种情况我之前也踩过坑，挺典型的，其实核心问题往往不在 qiankun 本身，而在子应用的部署路径和 publicPath 注入时机上。

先说结论：子应用部署后资源 404，大概率是因为子应用在被 qiankun 加载时，Webpack 的 publicPath 没有被正确覆盖，导致它还是按默认路径（比如根路径 /）去找资源，但实际部署在子路径（比如 /sub-app/）下，自然就 404 了。

你提到试过 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__，这个方向是对的，但要注意几点：

1. 这个赋值必须在任何模块加载之前执行，最好放在子应用入口文件（比如 main.js 或 index.js）的最最最上面，甚至在 import 任何其他模块之前，比如：

if (window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {

  window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}



// 然后再 import App 等逻辑

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

2. 如果你用的是 Vue + vue-cli，记得在 vue.config.js 里把 publicPath 设为 './'（相对路径），或者留空（默认 ./），避免构建时打包成绝对路径：

module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

};

3. 子应用的 nginx（或部署服务）配置要注意：
- 不能对静态资源路径做重定向（比如把 /sub-app/xxx.js 重定向到 /sub-app/xxx.js? 会破坏资源请求）
- 确保子应用的 entry 和 assetsPublicPath 与部署路径一致
- 如果用了 CDN，要确认 __INJECTED_PUBLIC_PATH_BY_QIANKUN__ 是否真的注入了正确的 CDN 前缀（可以在浏览器里打印一下看看）

4. 最后一个容易忽略的点：qiankun 2.4+ 版本之后，主应用注册子应用时，如果用了 entry: 'https://cdn.xxx.com/sub-app' 这种完整 URL，qiankun 会自动注入 __INJECTED_PUBLIC_PATH_BY_QIANKUN__；但如果 entry 是相对路径（比如 '/sub-app'），那得确保主应用的微应用注册路径和子应用实际部署路径一致。

我建议你先打印一下 window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 看看值对不对，再检查子应用入口文件里这个赋值是不是真的执行到了——有时候代码缩进或者模块导入顺序搞错了，就白写了。

希望能帮到你，如果还不行可以贴下你的子应用入口文件和 nginx 配置，我帮你看看。

2026-02-25 11:00