問題描述: 自己在自學vue做項目的過程中,遇到一個有關背景圖片路徑的問題,就是css代碼中背景圖片是根據相對路徑來寫的,如下圖: 當使用npm run dev命令本地訪問的時候,背景圖片是正常顯示的,可使用npm run build命令打包后,訪問dist目錄下的項目,頁面背景圖路徑就不 ...
在build utils.js文件中添加publicPath: .. .. ...
2019-08-16 20:24 0 552 推薦指數:
問題描述: 自己在自學vue做項目的過程中,遇到一個有關背景圖片路徑的問題,就是css代碼中背景圖片是根據相對路徑來寫的,如下圖: 當使用npm run dev命令本地訪問的時候,背景圖片是正常顯示的,可使用npm run build命令打包后,訪問dist目錄下的項目,頁面背景圖路徑就不 ...
使用vue-cli構建vue項目后,再打包遇到一個css引入的背景圖片路徑的問題,就是css代碼中背景圖片是根據相對路徑來寫的,如下圖: 當使用npm run dev命令本地訪問的時候,背景圖片是正常顯示的,可使用npm run build命令打包后,訪問dist目錄下的項目,頁面背景圖 ...
1.原因解析 當用vue-cli自動構建項目后,有兩種運行方法,分別是: npm run dev : 提供一個開發的環境,自動熱更新,資源使用絕對路徑,所以可以正常看到背景圖片。 npm run build : 打包項目,資源使用相對路徑,所以會出現路徑錯誤問題。 注: 絕對路徑 ...
在build->webpack.base.conf.js里添加一句代碼: 具體位置在module->rules下 publicPath:"../../", ...
在build->webpack.base.conf.js里添加一句代碼: 具體位置在module->rules下 ...
css-loader: 當小於8192,就打包成base64,那么,大於的就不做處理; 情景:我在main.css中背景圖: 結果:打包的時候,圖片是在dist/images/文件夾下的,但是控制台中卻是: 圖片沒有找到,於是我去查看路徑 ...
問題背景:項目里面有用到背景圖片,開發模式下正常,打包之后發現報404錯誤。查看發現是背景圖片引用路徑出錯。 解決方法: build下由原來的相對路徑 "./" 改為絕對路徑 "/" 詳細緣由: vue項目在打包之后背景圖片訪問出錯? 首先,出錯 ...
在做VUE +的WebPack腳手架項目打包完成后,在IIS服務器上運行發現項目中的背景圖片加載不出來檢查項目代碼發現是因為CSS文件中,背景圖片引用的路徑問題;后來通過修改配置文件,問題終於解決了,解決方法如下: 注意:如果整體為空白,記得先改===》》》 1、記得改一下config下面 ...