按需引入 插件一：

npm i vite-plugin-style-import@1.2.0 -D

之前按照vant官网推荐按需引入的方法进行配置，但是一直在报错啊！！！

vite.config.js中配置

import styleImport from 'vite-plugin-style-import'

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

main.js中引入

import { AddressEdit } from 'vant';

const app = createApp(App)
app .use(AddressEdit)

运行，结果报错！！！

修改路径，执行成功

import styleImport from 'vite-plugin-style-import'

plugins: [
      vue()
	    styleImport({
		   libs: [
		   	{
		 	    libraryName: 'vant',
			    esModule: true,
		 	    resolveStyle: (name) => {
					    return `../es/${name}/style/index` !!!!改这里
			 	    },
			     },
		     ],
	     })
    ],

按需引入 插件二：

1.安装

npm install vite-plugin-imp -D

2. vite.config.js配置

import vitePluginImp from 'vite-plugin-imp'

 plugins: [
      vue(),
	    vitePluginImp({
		    libList: [
			    {
				    libName: 'vant',
				    style(name) {
					    if (/CompWithoutStyleFile/i.test(name)) {
						    return false
					    }
					    return `vant/es/${name}/style/index.js`
				    }
			    }
		    ]
	    })
    ],

3.main.js中引入

import { AddressEdit } from 'vant';

const app = createApp(App)
app .use(AddressEdit)

4. 页面展示