鍍金池/ 問答/HTML/ vue組件中，打包后的文件分隔符變成了反斜杠

vue組件中，打包后的文件分隔符變成了反斜杠

在 vue 組件中使用了背景圖

<style scoped>
#app {
  background: url(../assets/logo.png) 0 center no-repeat;
}
</style>

開發(fā)打包后，變成了

#app {
  background: url(static\img\logo.b5bb290.png) 0 center no-repeat;
}

實(shí)際應(yīng)該是 url(static/img/logo.b5bb290.png) 才對

如果是使用 <template> 中插入 <img> 標(biāo)簽則不會有上面的問題

回答
編輯回答
逗婦惱

我建議你還是仔細(xì)看一看你的樣式是否使用正確，如果是在app.vue中修改樣式，那么你的路徑引用錯(cuò)誤?？茨愕奶峁┐a，我覺得你是在新定義的模塊中使用，我覺得是后者，同時(shí)你修改了webpack.base.conf.js 的配置文件，在源文件中用的是url-loader對logo.png文件進(jìn)行的編譯，由于使用了limit文件大小限制，圖片會被轉(zhuǎn)成base64,如果將limit改為100，圖片見不會被轉(zhuǎn)換成base64,且路徑正常顯示，你的問題可能是使用了其它loader，如file-loader,但我測試后發(fā)現(xiàn)并沒有問題，所以可能是你的配置出了問題。

2017年4月1日 18:21
編輯回答
爛人

看一下你的 webpack 打包配置文件里設(shè)置的路徑格式是什么

2017年9月2日 01:51
編輯回答
司令

這么寫試一試：

<style scoped>
#app {
  background: url('@/assets/logo.png') 0 center no-repeat;
}
</style>

或者加上單引號或者雙引號試試，使之成為字符串格式

2017年3月29日 15:16