快捷導(dǎo)航

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

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

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

問(wèn)題描述

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

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

原因分析

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

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

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

多了一個(gè)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`
        }
      ]
    }),
  ],
};

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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