vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案

更新時間：2022年12月24日 08:39:20 作者：肖南飛

最近在vue項目中引入vant的時候發(fā)現(xiàn)報錯了,經(jīng)過嘗試發(fā)現(xiàn)了問題,現(xiàn)將完整引入流程提供給大家參考,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項目中按需引入vant報錯:Failed?to?resolve?import的解決方案,需要的朋友可以參考下

問題描述

近日嘗試使用vite+vue3+vant開發(fā)項目過程中，參考vant官網(wǎng)開發(fā)指南->快速上手->引入組件

按照上述配置好后，運行vite環(huán)境報錯：Failed to resolve import

原因分析

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

程序解析為：項目路徑/node_modules/vant/lib/vant/es/組件/style

實際應(yīng)該是：項目路徑/node_modules/~~vant/lib/~~ vant/es/組件/style

多了一個vant/lib路徑。

解決方案

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

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

在styleImport內(nèi)添加代碼塊：

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

完整代碼如下：

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

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

修改后，重新運行vite，問題解決。

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue響應(yīng)式原理模擬實現(xiàn)原理探究
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對象本身（對象的增刪值）或者對象屬性（重新賦值）發(fā)生了改變的時候，就會運行一些函數(shù)，最常見的示render函數(shù)
2022-09-09
vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue實現(xiàn)倒計時小功能
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)倒計時小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
查看vue版本號以及vue/cli腳手架版本號方式
這篇文章主要介紹了查看vue版本號以及vue/cli腳手架版本號方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧
2024-07-07
vue中vue-router的使用說明(包括在ssr中的使用)
這篇文章主要介紹了vue中vue-router的使用說明(包括在ssr中的使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
element的表單元素使用總結(jié)
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價值，感興趣的可以了解一下
2021-06-06
在vue路由上添加公共的路由前綴方式
這篇文章主要介紹了在vue路由上添加公共的路由前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Sublime Text新建.vue模板并高亮(圖文教程)
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01