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

img


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

虽然文档中给出的是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>

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

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^