虽然文档中给出的是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>
具体的配置可能会因为你的项目结构、需求和使用的插件而有所差异。你需要根据自己的具体情况来进行配置。
不知道你这个问题是否已经解决, 如果还没有解决的话:当前只是vite的开发环境踩坑,项目目前依旧保持webpack打包
vite需要node版本为12及以上,当前 v12.12.0