vuejs的.vue文件中的style標籤中的css樣式，背景圖路徑不對？

#wrapper{
width:100%;
height:100%;
position:fixed;
background-image:url(./img/open_bg.jpg)
}


在.vue文件中的CSS樣式中，使用背景圖

在webpack打包後，路徑不對，怎麼辦呢？

---

這種問題請帶上重現去 github vue-loader 倉庫開 issue...

---

如果你用了vue-cil，那麼在build目錄下找到utils.js中的ExtractTextPlugin.extract({}),裡面添加下面這個屬性就完美解決了publicPath: "../../"

---

碰到同樣問題，剛開始的解決辦法是：

1. 丟到data里，require進來，再在頁面綁定到:src或者:style。

後來遇到一個動態class的偽元素背景圖片，弄起來比較麻煩，想到轉成base64就不存在路徑問題了啊。去看了webpack.base.conf.js里圖片loader的大小限制是10kb，所以有了以下辦法：

2.壓縮圖片到10kb以下

3.把10kb的限制改大

4.直接在style里寫base64的url。

果然壓縮了一下圖片就成功了。

---

你是按.vue的路徑去算的吧？

打包後style會默認插入html，所以路徑是按htmlj頁面計算的

---

題主解決了么,現在碰到這個問題好棘手。。

---

我也遇到了相同的問題，已經在vue-loader上面開了issue了，坐等高手的援手。

---

推薦閱讀：