qiankun在vite中使用，图片无法显示问题

最新推荐文章于 2023-12-17 20:22:10 发布
最新推荐文章于 2023-12-17 20:22:10 发布
阅读量445 收藏
点赞数
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_f_y/article/details/134563837
版权

当图片使用路径别名 “@” 的时候，主会默认以主应用的路径开始作为绝对路径的开始

设置子应用的公共基础路径就行，此处可从 'vite-plugin-qiankun' 的插件 'vite-plugin-qiankun/dist/helper'中取

设置后图片引用为全路径

y_f_y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 1921
vue2/3解决项目打包后本地图片等资源找不到的问题
vite build打包后图片src路径无法转换问题
zlejan的博客
04-01 6898
关于vite build打包后图片src路径为转换成打包后路径问题 问题描述 今天在做项目的时候发现打包后有些图片找不到的问题。 出现问题的项目代码： 原因分析： 采用了封装的image组件，导致src属性解析成字符串，而不是路径，类似动态地址，所以无法被解析。 解决方法 1.采用标签来引入图片 2 利用import获取打包文件的动态地址 希望能帮助遇到此类问题的小伙伴，本文仅供参考。 ...
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 1192
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
FellAsleep的博客
05-31 7759
因为vite构建的vue3项目，无法使用require导入图片，需要处理。1.新建 utils/require.js 文件。
qiankun在主应用、子应用均为vue3+vite+typescript中的使用
m0_37653407的博客
06-08 3776
微前端，qiankun在主应用、子应用均为vue3+vite+typescript中的使用
微前端四：qiankun在开发中遇到的问题
weixin_44384273的博客
10-18 2469
1、图片路径不对； 2、vue2.0 + element ui 和 vue3.0 + element plus样式冲突；
总结 vite + qiankun + vue3 遇到的坑
qq_29615135的博客
06-04 935
总结 vite + qiankun + vue3 遇到的坑
解决基于Vite的qiankun微前端中，子应用的路由跳转出错的问题
Lea_HQ的博客
12-17 1670
在基于vite的qiankun框架的使用过程中，发现我可以通过基台应用跳转到目标子应用，但是对于这个目标子应用本身的路由却失效，提示说找不到相关地址，但是在子应用中的路由确实是注册了的。
保留vite es特性，快速接入乾坤微前端子应用.zip
02-08
7. **集成流程**：使用vite-plugin-qiankun，开发者需要配置Vite的构建脚本，设置乾坤的子应用入口，处理好公共样式和脚本的共享，以及解决跨域和通信问题。 8. **性能优化**：在微前端场景下，关注点包括首屏加载...
vite-mdx:在Vite中使用mdx的示例
03-21
本示例将详细介绍如何在Vite项目中集成并使用MDX。 1. **安装vite-mdx插件** 在Vite项目中使用MDX，首先需要安装`vite-plugin-mdx`插件。打开终端，进入你的Vite项目目录，然后运行以下命令： ```bash npm ...
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-qiankun'; export default { // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致 plugins: [qiankun('...
vite+vue3使用模块化批量发布Mockjs接口
最新发布
03-29
在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...
如何使用vite-svg-loader
02-23
在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器兼容性问题等。为了解决这些问题，Vite-SVG-Loader 插件...
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用
热门推荐
qq_29517595的博客
02-08 1万+
vue3+vite的主应用，改造成基于qiankun的微应用框架。并实现接入vue3+vite微应用、vue2+webpack微应用。微应用的接入，是在主应用的路由菜单中进行激活，也就是说，主应用的一个菜单可以对应一个微应用系统，主应用中展示哪些微应用的路由，可以在主应用在自定义。并且完成了部署，解决了主应用部署在二级目录、三级目录的难题
vue3+vite作为子应用集成qiankun
m0_37755267的博客
07-13 778
vue3+vite作为子应用集成qiankun
qian‘kun微服务配置vue3.2+ts+vite子应用教程
接着奏乐接着舞的博客
07-21 5283
写这篇文章是因为截至今日，乾坤微前端对于vue3和vite的支持还不够，加上网上乱七八糟的文章太多，误人子弟。还有一点，vue3.2+ts+vite应该是截至今日前端最新的技术栈了。这篇文章，只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章为什么要用微前端？如何使用乾坤微前端？https。......
微前端-qiankun：vue3-vite 接入 nuxt2
snowball的博客
03-18 1064
2.1、安装@femessage/nuxt-micro-frontend。2.4、访问主项目，访问到nuxt应用，接入成功。2.3、根目录创建文件 mfe.js。
vite+vue3主应用，vue-cli+vue3为子应用引入乾坤js（qiankunjs）
You Jump,I Jump.
04-05 1015
vue3使用乾坤JS，vite作为主应用。
在 Vite 中使用 CSS Modules 中localsConvention配置示例
05-19
在 Vite 中使用 CSS Modules，可以通过在 `sfc` 选项中的 `css` 属性里设置 `modules` 为 `true` 来启用。而 `localsConvention` 选项则是用来配置 CSS Modules 自动生成的类名的命名规则。 以下是一个在 Vite 中使用 CSS Modules 和 `localsConvention` 配置的示例： ```html <template> <div :class="$style.wrapper"> <h1 :class="$style.title">Hello, world!</h1> <p :class="$style.text">Lorem ipsum dolor sit amet.</p> </div> </template> <script> export default { name: 'MyComponent', } </script> <style scoped module localsConvention="camelCase"> .wrapper { background-color: #f9f9f9; padding: 20px; } .title { font-size: 24px; color: #333; } .text { font-size: 16px; color: #666; } </style> ``` 在上面的示例中，`localsConvention` 被设置为 `camelCase`，因此 CSS Modules 会将所有的类名转换为驼峰式命名。例如，`.wrapper` 类名会被转换为 `$style.wrapper`，`.title` 类名会被转换为 `$style.title`，以此类推。这样，我们在组件中使用类名时，就可以直接使用 `$style` 对象来引用 CSS Modules 自动生成的类名了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值