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

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組件間傳值的6種方法總結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤的解決

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

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

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

最新評(píng)論