The vue3+vite+vant project introduces vant error as needed and reports Failed to resolve import solution

Introduce vant error Failed to resolve import solution on demand under the vue3+vite+vant project

Problem Description

In the process of learning the vite+vue3+vant development project,
refer to the vant official website development guide->Get started quickly->Introduce the component vant component library official website

After configuring as above, when running the vite environment, an error message appears: Failed to resolve import

Cause Analysis

According to the error message, it was found that the vant style introduction path was incorrect.
Taking Buttonthe component as an example
, the program parses as: project path/node_modules /vant/lib/vant/es/button/style.
It should actually be: project path/node_modules/vant/es/button/style
has an additional vant/lib path.

solution

vite.config.tsResolve to the correct path in the file .
The official website code is as follows:

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

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [vue(),
    styleImport({
    
    
      resolves: [VantResolve()],
    }),
  ],
})

Add code block inside styleImport:

libs: [
        {
    
    
          libraryName: 'vant',
          esModule: true,
          resolveStyle: name => `../es/${
      
      name}/style`
        }
      ]

The complete code is as follows:

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

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

After modification, re-run vite and the problem is solved.

This article is only for recording error notes, quoted from blog