qiankun-vite作为子应用后静态资源404解决

最新推荐文章于 2024-03-15 16:50:00 发布
最新推荐文章于 2024-03-15 16:50:00 发布
阅读量1.7k 收藏 2
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40596257/article/details/129797116
版权

继上一篇在利用qiankun框架搭建微前端，vite作为子应用，发现了一个新的问题，就是子应用的静态资源路径受到了基座应用的影响，今天来记录下解决方法

在 vite.config.js 中，加入以下代码，和plugins平级，origin换成你的子应用的ip

server: {
   origin: 'http://localhost:3000', //项目baseUrl，解决主应用中出现静态地址404问题
},

让代码飞1926
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3 + vite：打包部署后，动态组件渲染404问题解决
weixin_43865196的博客
02-01 951
问题描述： 当需要渲染动态组件，动态的组件路径配置在数据库中时，如下图，本地运行能正常访问，用vite打包部署后，生产上改路径为404.起初认为是，vite打包后的文件都是.js, 当页面加载后从数据库拿来的路径是.vue, 并且是src/xxx/xxx.vue 这种绝对路径形式的，所以就找不到文件了。
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
简介 vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件 保留vite构建es模块的优势 一键配置，不影响已有的vite配置 快速开始 1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-qiankun'; export default { // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致 plugins: [qiankun('myMicroAppName')], // 生产环境需要指定运行域名作为base base: 'http://xxx.com/' } 2、在入口文件里面写入乾坤的生命周期配置 // main.ts import { renderWithQiankun, qiankunWindow
解决 qiankun 子应用资源404问题
最新发布
weixin_59685936的博客
03-15 600
解决 qiankun 子应用资源404问题
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 927
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
微前端 qiankun webpack打包后静态资源路径404问题解决
weixin_45020094的博客
12-07 6334
首先出现静态资源加载失败的原因是路径问题， 子应用的路径被父应用影响，解决方法 你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url { output: { publicPath: `//localhost:${port}`, } } 借助 webpack 的 url-loader 将字体文件和图片打包，小文件转 base64 ，大文件注入路径前缀 vue cli2写法 const publicPath = process.env.NODE_ENV ===
vite打包页面空白不显示，静态资源404
ztwelve的博客
11-02 1426
vue3 vite打包构建GitHub pages或上传服务器时，出现打包后的js和css加载失败以及图片不显示问题
qiankun微前端 为什么微应用加载的资源会 404
热门推荐
就是不掉头发
12-19 23万+
原因是 webpack 加载资源时未使用正确的 publicPath。 可以通过以下两个方式解决这个问题： a. 使用 webpack 运行时 publicPath 配置 qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量，你需要做的是在微应用的 entry js 的顶部添加如下代码： __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 关于运行时 publicPath
qiankun-example::rocket: qiankun实战demo，父应用vue，子应用用react和vue
05-08
qiankun-example qiankun 实战 demo，父应用 vue，子应用用 react 和 vue
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start ...
qiankun - vue子应用
01-30
qiankun - vue子应用
qiankun-angular-angularjs:基于 qiankun，主应用为 angular，子应用为angularjs
05-29
QiankunAngularAngularjs基于qiankun,实现了在angular9主应用下挂angularjs子应用的范例。可实现angularjs和angular9优雅共存，增量迁移。本工程只是对qiankun官网样例的补充，如果想要详细了解qiankun请访问官网：...
「qiankun+nuxt」子应用请求本地文件报错404
莫奈小姐姐的博客
03-11 1035
目前公司的前端架构是qiankun+nuxt做的微前端项目。记录遇到的问题
vite作为qiankun子应用的方法
lucky_zouzou的博客
08-18 3892
vite构建的vue3项目作为qiankun子应用的方法
qian‘kun微服务配置vue3.2+ts+vite子应用教程
接着奏乐接着舞的博客
07-21 5172
写这篇文章是因为截至今日，乾坤微前端对于vue3和vite的支持还不够，加上网上乱七八糟的文章太多，误人子弟。还有一点，vue3.2+ts+vite应该是截至今日前端最新的技术栈了。这篇文章，只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章为什么要用微前端？如何使用乾坤微前端？https。......
【傻瓜式教学】Vite项目中静态资源 动态路径处理（Vite打包后无法显示静态资源）
小安驾到的博客
11-09 3520
适用场景： img标签是通过v-for动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。 Bug原因： Vite打包只会处理静态src路径，动态src路径只会原样保留。
解决阿里qiankun微应用资源无法加载
洲上牧童
07-05 1706
公司老项目多了，却想用新版本的框架，最好的解决办法就是用微前端。本文说下我们在用阿里微前端框架qiankun，遇到的一些问题，以及一些巧妙的解决办法。
qiankun子应用静态资源404问题有效解决（遇到了http请求静态文件404、css文件引用图片无法显示、svg图片转换成 base64无法显示等问题）
Alice_hhu的博客
01-26 1030
qiankun子应用静态资源404问题
解决基于Vite的qiankun微前端中，子应用的路由跳转出错的问题
Lea_HQ的博客
12-17 1424
在基于vite的qiankun框架的使用过程中，发现我可以通过基台应用跳转到目标子应用，但是对于这个目标子应用本身的路由却失效，提示说找不到相关地址，但是在子应用中的路由确实是注册了的。
vite-plugin-qiankun
05-10
vite-plugin-qiankun 是一个用于在微前端中集成 qiankun 的 vite 插件。Qiankun 是一个在同一页面中同时运行多个子应用的微前端解决方案，它可以让我们将一个大型应用拆分成多个小型的子应用，每个子应用可以独立开发、独立部署、独立升级，实现了应用的解耦和团队协作的目的。 vite-plugin-qiankun 实现了自动化分包、公共依赖、沙箱隔离等核心功能。它可以根据配置将子应用的代码自动分割至子应用的独立 chunk 中，同时打包出一个公共依赖的 chunk，并在提前预加载时只加载一次，减少了流量和加载时间。另外，它还为每个子应用生成了一个独立的沙箱，在同一页面中渲染多个子应用时不会相互影响，保证了应用的稳定性和可靠性。 使用 vite-plugin-qiankun，我们可以轻松地在一个项目中管理多个子应用，简化了开发和部署，提高了应用的可维护性和扩展性。如果你正在进行微前端的开发，并且正在寻找一个可靠的微前端解决方案，那么 vite-plugin-qiankun 绝对是一个值得尝试的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值