在微前端qiankun中使用Vite你踩坑了吗？

原创 已于 2022-06-07 20:19:15 修改 · 747 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2022-06-07 20:06:06 首次发布
本文介绍了在微前端框架qiankun中使用Vite进行应用打包所遇到的挑战。作者分享了在实际操作中发现qiankun官方暂未明确支持Vite的情况，但通过探索，可以找到解决办法。同时，文章还提到了另一个微前端框架MicroApp，作为qiankun的替代选择，以应对不同的微前端需求。

在微前端qiankun中使用Vite你踩坑了吗？_树酱的博客-优快云博客哈喽，我是树酱。之前搭建的微前端体系已经稳步运行将近两年了，最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用，那是不是我就无法使用了？是的，官方暂未有文档表明已经支持...https://blog.youkuaiyun.com/u013655559/article/details/122551984

 初探 MicroApp，一个极致简洁的微前端框架_前端劝退师的博客-优快云博客前言哈喽大家好，我是海怪。在微前端的领域里，相信大家都听说过阿里的 qiankun。我自己在上几个月也一直用它来做一些实践：微前端x重构实践落地总结当企微侧边栏遇上微前端在使用过程中我发现...https://blog.youkuaiyun.com/weixin_40906515/article/details/122872067

最低0.47元/天 解锁文章
vue3+qiankun+vite搭建微前端服务
LD喂！的博客
03-16 4822
因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下 qiankun基座配置 1.修改index.html中div的id,并在main.js中修改挂在函数 //index.html <div id="qiankunBaseApp"></div> //main.js createApp(App) .mount('#qiankunBaseApp') 2.main.js启动qiankun import { r
微前端完整vue实例-乾坤【qiankun】
01-16
功能说明： 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install...
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
vite-plugin-qiankun 微前端插件配置指南：从零到一的完整实践
最新发布
gitblog_00515的博客
11-21 624
在当今前端开发领域，微前端架构正逐渐成为大型应用的首选方案。vite-plugin-qiankun 作为一款专为 Vite 项目设计的微前端插件，能够帮助开发者快速将应用接入 Qiankun 微前端框架，同时保留 Vite 构建 ES 模块的全部优势。本指南将带你从零开始，掌握这个插件的完整使用方法。 ## 🎯 为什么选择 vite-plugin-qiankun？ **核心优势对比表：**
微前端框架qiankun调研及开发过程中的血泪教训
Yi_qian的博客
12-28 3011
微前端就是将前端应用拆分为更小、更易于管理的多个应用，通过一个主应用来加载这些子应用。比如某个功能庞大的系统（某团），某团外卖、某团优选、某团骑行等模块若全都处于一个项目中，项目代码量逐渐庞大，项目可维护性难免会降低；微前端可将这些模块单独拆成独立子应用，通过统一入口分别跳转，子应用发布、报错、测试流程仅限于子应用，不会受别的业务影响，同时也不影响别的业务，实现业务解耦。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
qiankun+vite子应用使用指南
QiuXiang_的博客
12-09 1427
vite-plugin-qiankun解决不支持 + vite-plugin-css-injected-by-js解决样式冲突
微前端框架之乾坤【qiankun】 vue3+vite+qiankun（手把手搭建版）
热门推荐
m0_51400948的博客
07-17 1万+
简介:qiankun是一种微前端框架，可以将多个前端应用集成为一个整体。每个子应用可以使用不同的框架和技术栈，它们之间可以相互独立开发和部署,qiankun提供了一套完整的生命周期函数和通信机制，可以让不同的子应用之间进行跨框架和跨域的通信和交互。
保留vite es特性，快速接入乾坤微前端子应用.zip
02-08
【描述】中的"快应用开发"则暗示了此项目旨在加速企业级应用的开发过程，快应用通常指的是轻量级、快速启动的应用，可能是指在微前端架构下，各个子应用能独立开发、部署，从而提高开发效率和迭代速度。 【标签】...
微前端_乾坤_快速接入_插件_Vite构建_ES模块_一键配_1744166539.zip
04-13
乾坤是微前端领域中的一款知名JavaScript框架，它允许你快速地将应用模块化，并且可以将这些模块集成到一个大的应用中。 Vite是现代前端构建工具中的一个新兴明星，它拥有超快的热更新、轻量级的服务端和零配置的...
qiankun + Vite 实现最简微前端
Yana's Blog
09-22 1472
前言摘抄自qiankun官网微前端介绍微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
snow的博客
03-14 7163
可以对老jQuery项目进行升级，老业务不变，新页面使用vue3，这样就好了，目前没有看到相关的资料，看到一些资料是遇到问题的，比如全局变量丢失等，待研究。1.5、qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。不要对 iframe 抱有偏见，它也是微前端的一种实现方式，如果页面上无弹窗、无全屏等操作，iframe 也是很好用的。任意 js 框架均可使用。
Vite微应用如何接入qiankun
10-31 2594
详细介绍如何在qiankun中集成Vite构建的应用，保持ESM特性的同时还能使用微前端能力。
微前端qiankun接入Vite子应用含Vue3和React18
明知山
10-20 2399
文件，进行单独的抽离。的，需要借助插件完成。的一样，就不贴代码了。
极简实战：React + Vue 微前端（Qiankun + Vite）
2401_86373285的博客
08-01 1448
微前端架构将大型应用拆解为独立开发、部署的子应用，极大提升了复杂系统的可维护性。本文将手把手教你使用 Qiankun 框架，在 Vite 构建的 React 18 主应用中集成 Vue 3 子应用。
vite构建vue3项目如何使用qiankun接入子应用
fanxia2313的博客
08-01 839
因为我父子应用都使用了unocss，所以unocss的样式重置机制导致了我父子应用的样式冲突了 所以我多了这行代码。qiankun天然不支持vite，所以在子应用接入的时候需要用到 vite-plugin-qiankun 插件。还需要在子应用的src文件下添加 public-path.js文件，主要是为了处理子应用的静态资源问题。首先使用vue创建两个vue3的项目，一个是主应用，一个是子应用。基础：主应用使用vite构建，子应用也是使用vite构建。父应用相关配置就是这样，没有什么难度，主要注意点，
qiankun插件vite-plugin-qiankun的使用
m0_74331766的博客
04-25 1871
qinakun插件的使用方法
qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用
sj18838107211的博客
04-27 2302
qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用
微前端（qiankun）vue2、vue3+webpack、vue3+vite的详细使用
m0_60893808的博客
06-19 1415
微前端 qiankun 是一个基于Single-SPA框架开发的、开源的微前端实现库，由蚂蚁金服（现蚂蚁集团）团队开发和维护。它的目标是为开发者提供一套简单、强大且生产可用的解决方案，帮助构建大型单页应用或聚合多个独立前端应用，无视框架限制React、Vue、Angular 等。
如何在 Vue.js 中使用 Vite 的环境变量？
07-02
在 Vue.js 项目中使用 Vite 获取和使用环境变量时，可以通过 `.env` 文件定义不同环境下的配置，并通过 `import.meta.env` 对象访问这些变量。Vite 默认只暴露以 `VITE_` 开头的环境变量给客户端代码，这样可以确保敏感信息不会被意外暴露。 ### 环境变量命名规范 - 所有自定义环境变量必须以 `VITE_` 开头，否则它们不会被加载到客户端环境中。 - 变量值始终作为字符串处理，即使原始值是布尔值或数字，也需要手动转换[^1]。 例如，在 `.env.development` 文件中定义如下内容： ```bash # 页面标题 VITE_APP_TITLE='博客' # 开发环境接口地址 VITE_SERVE='http://******' ``` 可以在 Vue 组件或其他 JavaScript/TypeScript 文件中通过以下方式访问这些变量： ```javascript console.log(import.meta.env.VITE_APP_TITLE); // 输出: 博客 console.log(import.meta.env.VITE_SERVE); // 输出: http://****** ``` ### 在 vite.config.ts 中使用环境变量 如果需要在 `vite.config.ts` 配置文件中使用环境变量，可以通过 `loadEnv(mode, process.cwd())` 方法获取当前模式下的环境变量。这种方式适用于配置服务器端选项（如代理、端口等）或构建参数（如是否删除 console 和 debugger）[^2]。 示例代码如下： ```typescript import { defineConfig, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; export default ({ mode }: any) => { const env = loadEnv(mode, process.cwd()); return defineConfig({ plugins: [vue()], server: { port: Number(env.VITE_PORT), // 端口号 proxy: { '/api': { target: env.VITE_SERVE, changeOrigin: true } } }, build: { terserOptions: { compress: { drop_console: Boolean(env.VITE_DROP_CONSOLE), drop_debugger: Boolean(env.VITE_DROP_DEBUGGER) } } } }); }; ``` ### 处理非字符串类型的环境变量 由于环境变量默认为字符串类型，因此在处理布尔值或数值型变量时需显式进行类型转换。例如，将字符串 `'true'` 转换为布尔值 `true` 或将 `'8080'` 转换为数字 `8080`。这种做法可以避免运行时错误并提高配置灵活性[^3]。 ```typescript const VITE_DROP_CONSOLE = Boolean(env.VITE_DROP_CONSOLE); const VITE_PORT = Number(env.VITE_PORT); ``` ### 区分不同环境的配置 Vite 根据当前模式自动加载对应的 `.env` 文件。例如： - 当前模式为 `development` 时，加载 `.env.development`； - 当前模式为 `production` 时，加载 `.env.production`。 这意味着可以根据不同的部署环境设置特定的 API 地址、功能开关等配置，从而实现灵活的多环境支持[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值