Vue3+vite+vant プロジェクトで vant オンデマンドが導入され、インポート ソリューションの解決に失敗したエラーが報告される

vue3+vite+vant プロジェクトで vant エラーが発生し、オンデマンドでインポート ソリューションを解決できませんでした

問題の説明

vite+vue3+vant 開発プロジェクトを学習する過程で、
vant 公式 Web サイトの開発ガイドを参照してください -> すぐに始めましょう -> コンポーネントの紹介Vant コンポーネント ライブラリ公式 Web サイト

上記のように設定した後、vite 環境を実行すると、エラー メッセージが表示されます: インポートを解決できませんでした

原因分析

エラーメッセージによると、vantスタイルの導入パスが間違っていることが分かりました。コンポーネントを例に
取ると、プログラムは次のように解析します: project path/node_modules /vant/es/button/style実際には次のようになります: project path/node_modules/vant/es/button/style には追加の vant/lib パスがあります。Button
/vant/lib

解決

vite.config.tsファイル内の正しいパスに解決します。
公式サイトのコードは以下の通りです。

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()],
    }),
  ],
})

styleImport 内にコード ブロックを追加します。

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

完全なコードは次のとおりです。

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`
        }
      ]
    }),
  ],
})

変更後、vite を再実行すると問題は解決します。

この記事はブログから引用した、エラーメモの記録のみを目的としています。