vant4按需引入组件失败 降到vant3用babel.config.js也失败不知道为什么？

Question

vant4按需引入组件失败
降到vant3用babel.config.js也失败不知道为什么？
按照官方文档来改了
vant4中vue.config.js这样配置

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
    configureWebpack: {
        plugins: [
            ComponentsPlugin({
                resolvers: [VantResolver()],
            }),
        ],
    },
};

官方文档也是这样的

Answer 1

在Vant 4版本中，按需引入组件的方法已经发生了变化。为了使组件按需引入正常工作，你需要首先安装一些相关的插件和依赖项：

npm install @vant/cli @vant/theme -D
npm install vant -S

接下来，你可以通过创建一个.vant文件来指定你需要按需引入的组件。在.vant中，你可以使用星号（*）来导入所有组件，也可以仅导入你需要的组件。例如，以下.vant文件将导入所有组件和Button组件：

button
*

接下来，在vue.config.js中，你可以使用以下配置来支持按需引入：

const { getThemeResolver } = require('@vant/cli');
const { ViteAliases } = require('vite-aliases');
const ComponentsPlugin = require('unplugin-vue-components/vite');
const { VueI18nPlugin } = require('vite-plugin-vue-i18n');

module.exports = {
  plugins: [
    VueI18nPlugin({
      // options
    }),
    ComponentsPlugin({
      dirs: ['src'],
      extensions: ['vue'],
      deep: true,
      importPath: (path) => path.replace(/^@\//, 'vant/'),
      resolvers: [
        getThemeResolver({
          resolve: (name) => {
            if (name === 'filePath') {
              return '/path/to/@vant/theme';
            }
          },
        }),
      ],
    }),
  ],

  resolve: {
    alias: {
      ...ViteAliases(),
      vant: '@vant/vue3',
      'vant-icons': '@vant/icons',
    },
  },
};

以上配置中，我们使用了getThemeResolver方法来支持Vant的主题定制，使用ViteAliases方法来支持别名，使用ComponentsPlugin插件来支持按需引入组件。

如果你想按需引入Vant 3版本中的组件，你可以使用babel-plugin-import插件。请注意，在Vant 3中，你需要在babel.config.js中配置transform-runtime和transform-async-to-generator插件，示例配置如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true,
      },
      'vant',
    ],
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
    '@babel/plugin-transform-async-to-generator',
  ],
};

请确保你已经按照babel-plugin-import插件的要求，安装了相关的依赖：

npm install babel-plugin-import -D

如果你已经按照上述方法配置，并且仍然无法成功按需引入组件，请检查你的相关依赖包是否正确安装，并检查你的导入方式是否正确。