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, // 关闭虚拟路由
})
相关推荐
杨艺韬19 小时前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农20 小时前
外卖餐具智能推荐
linux·服务器·前端
qq_2837200520 小时前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
2401_8858850420 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢021120 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha21 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌21 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊1 天前
原生form发起表单干了啥
前端
剪刀石头布啊1 天前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静1 天前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程