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

我的项目是用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日

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么