[Bug Report] 按需引入组件情况下，在程序中读取vant版本报错

[since2006]

重现链接

无

Vant 版本

3.4.9

描述一下你遇到的问题。

按需引入组件情况下，想在程序中读取vant的版本，报错：Can't resolve 'vant/es/version' 。

vue 或 ant-design-vue 中都能读取到，看 vant\lib\index.d.ts 中也有 export const version。

重现步骤

import { version } from 'vant'

<div>{{ version }}</div>

data() {
   return {
     version
   }
}

设备/浏览器

No response

[chenjiahan]

babel-plugin-import 会转换 import 的路径，导致 version 无法被 import 到。

这种情况建议不要使用 babel-plugin-import，借助构建工具的 tree shaking 同样能移除不需要的代码。

[chenjiahan]

unplugin-vue-components 没这个问题，推荐使用 unplugin-vue-components 代替 babel-plugin-import:

安装：

# with npm
npm i unplugin-vue-components -D
# with yarn
yarn add unplugin-vue-components -D
# with pnpm
pnpm add unplugin-vue-components -D

在 webpack 配置中添加：

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

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

[since2006]

用 unplugin-vue-components 没有问题了

用此方法需要在 main.js 中引入样式，不然会出现样式不对的情况，如navbar, dialog
import 'vant/lib/index.css'

[chenjiahan]

@since2006 unplugin-vue-components 自动引入的样式应该不会有问题，方面的话提供一个复现仓库我看看

[since2006]

@chenjiahan
https://github.com/since2006/vant-sample.git

打开首页后，查看顶部 navbar 和点击 “Dialog测试”查看效果。
然后在 main.js 里，取消注释//import 'vant/lib/index.css' 再查看效果

[chenjiahan]

unplugin-vue-components 的问题统一在这个 issue 中跟进：#10709