vue3 按需引入Vant 踩的两个坑

vue3 按需引入Vant
1.报错找不到文件
Internal server error: Failed to resolve import “D:/xxxx/xxxx/node_modules/vant/lib/vant/es/button/style” from “src\main.js”. Does the file exist?

原因：路劲多了vant/es 导致找不到文件
解决：vite.config.js配置项里更改配置

plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
      libs: [{
        libraryName: 'vant',
        esModule: true,
        resolveStyle: name => `../es/${name}/style`
      }]
    }),
  ],

2.引入无效

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { Button } from 'vant';

createApp(App).mount("#app").use(Button);

发现这么引入入没有效果,解决更改挂载顺序

createApp(App).use(Button).mount("#app");

把use写在前面就可以了。