欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ā)指南->快速上手->引入組件

按照上述配置好后，運(yùn)行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`
        }
      ]
    }),
  ],
};

修改后，重新運(yùn)行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組件間傳值的6種方法總結(jié)

    vue組件間傳值的6種方法總結(jié)

    這篇文章主要給大家介紹了關(guān)于vue組件間傳值的6種方法,組件是vue.js最強(qiáng)大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,需要的朋友可以參考下
    2023-08-08
  • vue-cli中的:visible.sync是什么意思

    vue-cli中的:visible.sync是什么意思

    visible前面加冒號的，說明后面是一個變量或者表達(dá)式；沒加冒號的后面就是對應(yīng)的字符串字面量，這篇文章主要介紹了vue-cli中的:visible.sync是什么,需要的朋友可以參考下
    2022-11-11
  • 如何理解Vue前后端數(shù)據(jù)交互與顯示

    如何理解Vue前后端數(shù)據(jù)交互與顯示

    這篇文章主要介紹了如何理解Vue前后端數(shù)據(jù)交互與顯示，對Vue感興趣的同學(xué)，可以參考下
    2021-05-05
  • vue+element樹形選擇器組件封裝和使用方式

    vue+element樹形選擇器組件封裝和使用方式

    這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2020-04-04
  • 深入了解Vue組件七種通信方式

    深入了解Vue組件七種通信方式

    vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進(jìn)行一下總結(jié)，感興趣的可以學(xué)習(xí)一下
    2021-12-12
  • vue中更改數(shù)組中屬性,在頁面中不生效的解決方法

    vue中更改數(shù)組中屬性,在頁面中不生效的解決方法

    今天小編就為大家分享一篇vue中更改數(shù)組中屬性,在頁面中不生效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue路由vue-router詳細(xì)講解指南

    Vue路由vue-router詳細(xì)講解指南

    這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對vue-router感興趣的同學(xué)，可以參考下
    2021-04-04
  • element Table表格組件多字段(多列)排序方法

    element Table表格組件多字段(多列)排序方法

    最近需要做個需求，需要做到element Table表格組件多字段(多列)排序，本文就詳細(xì)的介紹一下方法，感興趣的可以了解一下
    2021-09-09
  • VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決

    VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決

    這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • Vue使用swiper問題(5.2.0版本,避免踩坑)

    Vue使用swiper問題(5.2.0版本,避免踩坑)

    這篇文章主要介紹了Vue使用swiper問題(5.2.0版本,避免踩坑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04

最新評論