亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案

 更新時(shí)間：2024年01月23日 09:12:20   作者：OrienZ?3  
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

問(wèn)題描述

在學(xué)習(xí)vite+vue3+vant開(kāi)發(fā)項(xiàng)目過(guò)程中，

參考vant官網(wǎng)開(kāi)發(fā)指南->快速上手->引入組件 vant組件庫(kù)官網(wǎng)

按照上述配置好后，運(yùn)行vite環(huán)境報(bào)錯(cuò)：Failed to resolve import

原因分析

根據(jù)報(bào)錯(cuò)信息，發(fā)現(xiàn)是vant的樣式引入路徑不對(duì)。

以Button組件為例

程序解析為：項(xiàng)目路徑/node_modules/vant/lib/vant/es/button/style

實(shí)際應(yīng)該是：項(xiàng)目路徑/node_modules/ vant/es/button/style

多了一個(gè)vant/lib路徑。

解決方案

在vite.config.ts文件中解析至正確路徑。

官網(wǎng)的代碼如下：

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內(nèi)添加代碼塊：

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

修改后，重新運(yùn)行vite，問(wèn)題解決。

本文僅為記錄出錯(cuò)筆記，引用自blog

總結(jié)

到此這篇關(guān)于vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed to resolve import的原因及解決方案的文章就介紹到這了,更多相關(guān)按需引入vant報(bào)錯(cuò)Failed to resolve import內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論