vite 库模式下打包vue3组件造成的sass scoped 问题

[lastube]

一批通用组件需要借助vite的库模式打包，打包完成后这些组件会被上传到服务器，在另外一个宿主页面，通过远程加载一个json文件来获得这些通用组件的描述，然后通过script 标签加载库文件打包完成的js文件，完成对通用组件的全局注册，再通过app.component 来注册到宿主页面上，这样宿主页面就可以渲染这些组件，有两个问题
1.通用组件在宿主页面渲染的时候，其dom结构的scope id 会被移除，但是同时注册进页面的css的属性选择器仍然保留scope id 的引用cssCodeSplit:true , 导致样式失效
2.通用组件如果通过异步加载的方式进行导出:defineAsyncComponent vite的库模式并没有很好支持，即仅导出了一个文件，子组件没有单独生成文件

以上方案在vue2.0时代都可以很好实现，但现在却不能，该如何解决这个问题

我基于webpack + vue 3.0 也仍然解决不了这个问题

[edison1105]

说那么多，不如上代码。

[lastube]

vite.config.ts:

export default defineConfig({
plugins: [vue()],
base,
build: {
outDir,
lib: {
entry: resolve(__dirname, 'component.ts'),
name: projectName,
formats: ['umd'],
},
rollupOptions: {
// 你不想打包进库的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖
globals: {
vue: 'Vue',
},
entryFileNames: ${projectName}.[format].[hash].js
}
},
manifest: "manifest.json",
target:'es2015',
cssCodeSplit: true
}
})

component.ts:

import { defineAsyncComponent } from 'vue';

const testNormal = defineAsyncComponent({
loader:() => import('./components/testNormal.vue')
})
const testProps = defineAsyncComponent({
loader:() => import('.//components/testProps.vue')
})
export {
testNormal,
testProps
}

渲染完成的宿主页面