大国工匠普拉斯金 2023-04-05 11:32 采纳率: 75%
浏览 15
已结题

我的项目是用vite+vue3,现在学习qiankun,打包时文档只给了webpack配置该怎么办呢?

img


请问一下各位朋友我该如何在vite项目中配置webapck呢?

  • 写回答

2条回答 默认 最新

  • 程序yang 全栈领域优质创作者 2023-04-05 17:33
    关注

    虽然文档中给出的是Webpack配置,但是在使用Vite+Vue3时也可以使用类似的配置。下面是一个示例:

    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import { registerMicroApps, start } from 'qiankun'
    
    const app = createApp(App)
    app.mount('#app')
    
    // 注册微应用
    registerMicroApps([
      {
        name: 'app1',
        entry: '//localhost:7100',
        container: '#subapp-container',
        activeRule: '/app1'
      },
      {
        name: 'app2',
        entry: '//localhost:7101',
        container: '#subapp-container',
        activeRule: '/app2'
      }
    ])
    
    // 启动
    start()
    

    然后在你的 vite.config.js 中添加以下配置:

    module.exports = {
      // ...
      build: {
        lib: {
          entry: './src/main.js',
          formats: ['umd'],
          name: 'MyApp'
        },
        rollupOptions: {
          output: {
            globals: {
              vue: 'Vue',
              'qiankun': 'qiankun'
            }
          }
        }
      },
      // ...
    }
    

    然后在你的主项目 HTML 文件中引入构建出来的文件:

    <body>
      <div id="app"></div>
      <div id="subapp-container"></div>
      <script src="/dist/my-app.umd.js"></script>
      <script>
        MyApp.createApp().mount('#app')
      </script>
    </body>
    

    具体的配置可能会因为你的项目结构、需求和使用的插件而有所差异。你需要根据自己的具体情况来进行配置。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月13日
  • 已采纳回答 4月5日
  • 创建了问题 4月5日

悬赏问题

  • ¥30 电脑误删了手机的照片怎么恢复?
  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计
  • ¥15 来一个cc穿盾脚本开发者
  • ¥15 CST2023安装报错
  • ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了