Taro 4.x + vite + vue3 打包小程序如何使用分包异步化组件？

[zhangguanlei]

usingComponents与componentPlaceholder都已正常配置。

小程序开发工具中会提示警告：
[Vue warn]: Failed to resolve component: test-widget If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
以下是尝试过的配置方式：

// /config/index.js
vue: {
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag ===  ['test-widget'].includes(tag)
    }
  }
},
mini: {
    vueLoaderOption:{
      compilerOptions: {
        isCustomElement: tag=> ['test-widget'].includes(tag)
      }
  }
}

// app.js文件
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag === 'test-widget' || tag.startsWith('test-')
}

// vite.config.js
vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => {
        return tag === 'test-widget'
      }
    }
  }
})
编译会报错：[vite:vue] At least one <template> or <script> is required in a single file component. /taro/src/pages/test/index.vue

以上方式都未解决异步组件问题，组件在小程序中无法加载渲染！！！

[zhangguanlei]

// config/index.js
 plugins: [
    [
      '@tarojs/plugin-framework-vue3',
      {
        vueLoaderOption: {
          compilerOptions: {
            isCustomElement: (tag) => tag.includes('test-widget'),
            // whitespace: 'preserve'
          },
          reactivityTransform: true, // 开启vue3响应性语法糖
        },
      },
    ]
  ]

https://docs.taro.zone/docs/vue3#vueloaderoption