在使用vite3 打包组件库时有个需求：
就是将每个组件分别打包成一个js文件
这里只要在入口文件中使用import()语法就行
但遇到个问题，如果使用以下方式直接注册组件的话将无法在项目中使用 会报警告
const c = import.meta.glob('../packages/*/*.vue')
const install = (Vue) => {
for (const cKey in c) {
const component = c[cKey]()
component.then(com => {
Vue.component(com.default.__name, com.default)
})
}
}
export default install
改成如下就行
const install = (Vue) => {
for (const cKey in c) {
const name = cKey.split('/').splice(-1).join('').replace('.vue', '')
const asyncComponent = defineAsyncComponent(c[cKey])
Vue.component(name, asyncComponent)
}
}
将组件注册成异步的全局组件
如果使用以下这种方式，可以在项目中正常使用，但是全量引入
import comp1 from './*'
import comp2 from './*'
const c = [
comp1, comp2
]
const install = (Vue) => {
c.forEach(com) {
Vue.component(com.__name, com)
}
}
笔者也不知道为什么会在使用import()分割组件与import * from '*'导入时会有不同的注册方式
