vue3+vant按需引入报错，Failed to resolve import “E:/code/baidu/node_mod在这里插入代码片ules/vant/lib/vant/es/nav-bar/style” from “src\main.js”.

解决办法：在vite.config.js中解析正确的路径

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

• 遇到的问题

  • 按需引入vant，报引入样式找不到报错

  • 原因：引入vant的样式地址不对

  • 解决办法：在vite.config.js中解析正确的路径

遇到的问题

按需引入vant，报引入样式找不到报错

原因：引入vant的样式地址不对

• 程序解析为： /node_modules/vant/lib/vant/es/组件/style

• 实际的路径： /node_modules/vant/es/组件/style

• 解析的路径多了一个vant/lib

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
      libs: [{
        libraryName: 'vant',
        esModule: true,
        resolveStyle: name => `../es/${name}/style`
      }]
    },
  )],
  server: {
    host: '0.0.0.0',
    port: 8080
  },
  resolve:{ // 配置文件别称
    alias:{
      '@':path.resolve(__dirname,'./src')
    }
  },
})

具体参考地址：https://wenku.baidu.com/view/9a39d576f31dc281e53a580216fc700aba685256.html