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, // 关闭虚拟路由
})
相关推荐
小码哥_常6 分钟前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒7 分钟前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水13 分钟前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi1 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅2 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试
科雷软件测试2 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python
ConardLi2 小时前
把 Claude Design 做成 Skill,你的网站也能拥有顶级视觉体验
前端·人工智能·后端
We་ct2 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
IT_陈寒3 小时前
React状态更新那点事儿,我掉坑里爬了半天
前端·人工智能·后端