vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案
問題描述
在學(xué)習(xí)vite+vue3+vant開發(fā)項(xiàng)目過程中，
參考vant官網(wǎng)開發(fā)指南->快速上手->引入組件 vant組件庫官網(wǎng)
按照上述配置好后，運(yùn)行vite環(huán)境報(bào)錯(cuò)：Failed to resolve import
原因分析
根據(jù)報(bào)錯(cuò)信息，發(fā)現(xiàn)是vant的樣式引入路徑不對。
以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，問題解決。
本文僅為記錄出錯(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決
- vue3項(xiàng)目中配置sass,vite報(bào)錯(cuò)Undefined mixin問題
- vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法
- vite+vue3使用@路徑報(bào)錯(cuò)處理
- vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
- vue3+vite中報(bào)錯(cuò)信息處理方法Error: Module “path“ has been externalized for browser compatibility...
- Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決
- vue3+vite項(xiàng)目中按需引入vant報(bào)錯(cuò):Failed?to?resolve?import的解決方案
- vite+vue3項(xiàng)目報(bào)錯(cuò)：TypeError:?Promise.allSettled?is?not?a?function
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面緩存功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
文章介紹了Vite項(xiàng)目中本地開發(fā)環(huán)境通過配置proxy代理實(shí)現(xiàn)跨域請求的方法,并解釋了生產(chǎn)環(huán)境中該配置不生效的情況,通常使用nginx轉(zhuǎn)發(fā)或后端配置CORS來解決,文章還指出,最終的請求地址是target加上rewrite重寫的地址2025-12-12
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來看看吧2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境
這篇文章主要介紹了詳解如何從零開始搭建Express+Vue開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
如今Vue3的勢頭正盛，在diff算法方面也做了相應(yīng)的變化，利用到了最長遞增子序列把性能又提升了一個(gè)檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法2023-02-02
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫了一個(gè)本地服務(wù)編譯成exe程序,在electron程序啟動(dòng)后,自動(dòng)執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07