在vue中有關cli使用絕對路徑引用問題

這篇文章主要給大家介紹了關於vue cli使用絕對路徑引用圖片問題的解決方法，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。

前言

Vue是什麼，是一套建構使用者介面的漸進式框架（官網解釋），什麼叫漸進式框架呢，簡單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個讀者一千個哈姆雷特，不過多的解釋。 Vue官方文件 很全面的。

Vue是近兩年來比較火的一個前端框架（漸進式框架吧），本文將給大家詳細介紹vue cli使用絕對路徑引用圖片問題的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看吧。

正文：

在頁面中使用絕對路徑可透過在js中以require() 引入

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

<img :src="src">

樣式裡面似乎無法使用絕對路徑，除非把圖片資源都放到static裡面，然後就可以這樣引用

background: url("/static/images/banner.jpg") no-repeat;

但，放到static裡面webpack打包後只會把資源複製到發布目錄而不會把小圖片優化為base64。

為了兼顧可以把圖片資源優化，所以還是不適合把圖片資源放到static，但，在vue頁面style標籤裡面寫樣式隨著目錄的深入有可能引用路徑是：

background: url("../../../images/banner.jpg") no-repeat;

有個做法似乎可以省去一些麻煩：

把樣式檔統一放到style資料夾裡面，樣式圖片資源用相對路徑，然後在style標籤用src屬性引入樣式，這樣就可以避免太多層的返回了~~~

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在js中如何實作將陣列新增到物件中

使用gulp如何建立完整的專案流程

在vue中使用axios實作檔案上傳

#在JavaScript中如何實作圖片變大

在vue中如何實作樣式之間的切換

以上是在vue中有關cli使用絕對路徑引用問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！