micro-app vite4接入vite6 遇到的问题

micro-app:^1.0.0-rc.18

node:18.12.0

主应用:vite4+vue3

子应用:vite6+vue3

  1. Vue warn: Component is missing template or render function
    原因:没有正确识别<micro-app></micro-app>
    解决办法:
    vite.config.js
js 复制代码
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => /^micro-app/.test(tag)
        }
      }
    })
  ],
})
  1. micro-app from runScript app flowLtc: SyntaxError: Cannot use import statement outside a module
    解决办法:micro-app开子应用iframe沙箱
  2. 跨域
    解决办法:检查一下子应用有没有装micro-app,在子应用中配置跨域(看文档的说vite天然支持跨域,但是实际上还是配了server.cors:true
  3. 不报错但是也不渲染vite子应用
    解决办法:尝试关掉虚拟路由系统
    main.js
js 复制代码
import microApp from '@micro-zoe/micro-app'

// 在start中增加配置
microApp.start({
  'disable-memory-router': true, // 关闭虚拟路由
})
相关推荐
烛衔溟几秒前
TypeScript 类的静态成员与静态方法
开发语言·javascript·typescript
Nile几秒前
解密Palantir系列一:4. Ontology 不是哲学
开发语言·前端·javascript
Highcharts7 分钟前
如何创建蛛网地图|气泡事件+全球发布+关联组合图表开发示例
javascript
因_崔斯汀18 分钟前
ECharts 区域地图可视化实战:以山东地图为例
前端
Bacon26 分钟前
手摸手带你搞清楚 AI Agent 的六大核心概念
前端·人工智能
xier12345626 分钟前
three-instance-batch 开发笔记
javascript·three.js
王林不想说话27 分钟前
TypeScript 进阶知识总结:从 extends、泛型到 infer,一篇打通 TS 类型系统
前端·javascript·typescript
卤蛋fg629 分钟前
vxe-table 实现数据分组统计与表尾合计
vue.js
罗超驿33 分钟前
15.JavaScript 函数与作用域完全指南:语法、参数、表达式与作用域链实战
开发语言·前端·javascript
.千余35 分钟前
【C++】C++类与对象2:C++构造函数、运算符重载与流输入输出全面解析
c语言·开发语言·前端·c++·经验分享