改造ant design Vue Pro 1版本,现在使用插件后Form.Item,List.Item 这几个组件无法引入

[furylee]

Describe the bug

注释插件的话是可以使用的,目前就这一个问题了,不知道如何解决

配置如下

import { loadEnv, defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import VitePluginVue2Suffix from 'vite-plugin-vue2-suffix'
import path from 'path'
import commonjs from '@rollup/plugin-commonjs'
import postcss from 'esbuild-plugin-postcss'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  process.env.NODE_ENV = env.VITE_MODE
  return {
    // publicDir: "public",
    mode: env.VITE_MODE,
    base: '/',
    plugins: [
      // AntdMomentResolver(),
      VitePluginVue2Suffix(),
      vue(),
      vueJsx(),
      {
        name: 'less-import-fix',
        enforce: 'pre',
        transform(code, id) {
          if (id.endsWith('.less')) {
            // 确保 @import 语句中的 @ 符号保持不变
            return code.replace(/@import\s+['"]@([^'"]+)['"];/g, (match) => {
              return match.replace('@', '@@');
            });
          }
          return code;
        },
        // 在打包阶段还原 @import 语句
        generateBundle(_, bundle) {
          for (const file of Object.values(bundle)) {
            if (file.type === 'asset' && file.fileName.endsWith('.css')) {
              file.source = file.source.replace(/@@/g, '@');
            }
          }
        }
      },
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
      createHtmlPlugin({
        minify: false,
        inject: {
          data: {
            title: 'index',
            injectScript: `<script src="https://unpkg.com/viser-vue/umd/viser-vue.min.js"></script>`,
          },
          tags: [
            {
              injectTo: 'body-prepend',
              tag: 'div',
              attrs: {
                id: 'tag',
              },
            },
          ],
        },
      }),
      commonjs(),
    ],
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // less vars，customize ant design theme
            'border-radius-base': '2px',
            'theme-color': '#1890FF'
          },
          javascriptEnabled: true,
        },
        loaderOptions: {
          less: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
        // scss: { charset: false },
        postcss: {
          plugins: [
            {
              postcssPlugin: 'internal:charset-removal',
              AtRule: {
                charset: (atRule) => {
                  if (atRule.name === 'charset') {
                    atRule.remove()
                  }
                },
              },
            },
          ],
        },
      },
    },
    optimizeDeps: {
      esbuild: {
        plugins: [
          postcss({
            // 这里可以配置 PostCSS 选项
            plugins: [
              // 例如，添加 autoprefixer
              require('autoprefixer'),
            ],
          }),
        ],
      },
    },
    build: {
      sourcemap: true,
      minify: true,
      cssCodeSplit: true,
      chunkSizeWarningLimit: 1500,
      rollupOptions: {
        external: ['viser-vue'],
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          globals: {
            'viser-vue': 'viserVue',
          },
        },
      },
    },
    resolve: {
      alias: [
        {
          find: '~ant-design-vue',
          replacement: path.resolve(__dirname, 'node_modules/ant-design-vue'),
        },
        {
          find: '~',
          replacement: path.resolve(__dirname, 'node_modules'),
        },
        {
          find: '@',
          replacement: path.join(__dirname, './src'),
        },
      ],
      extensions: ['.js','.jsx','.vue', '.less']
    },
    server: {
      port: 8031,
      host: '0.0.0.0',
      open: true,
      hmr: true,
      proxy: {
        '/api': {
          target: 'https://xxx.xxx.com/',
          ws: false,
          changeOrigin: true,
          pathRewrite: { '^/api': '' }
        }
      }
    },
  }
})```

### Reproduction

http://www.baidu.com

### System Info

```Shell
vue 2.7

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[faner11]

我也遇到了这个问题

[defghy]

SelectOption, FormItem。有一些组件[email protected]没有export，是通过Vue.use全局注册使用的

/* istanbul ignore next */
Select.install = function (Vue) {
  Vue.use(Base);
  Vue.component(Select.name, Select);
  Vue.component(Select.Option.name, Select.Option);
  Vue.component(Select.OptGroup.name, Select.OptGroup);
};

export default Select;

如上，只有Select导出了，除非 unplugin-vue-components 支持import后设置components时能够设置取值方法，如下

components: {
   ASelectOption: Select.Option,
}

没看到有类似支持。

我的思路是select和form这类不export就不处理了，只处理那些导出的组件